leaudit-platform-frontend/app/styles/pages/document-upload.css

/**
 * 文档上传页面样式
 */

.document-upload-page {
  --primary-color: var(--color-primary, #00684a);
  --primary-hover: var(--color-primary-hover, #005a40);
  --primary-light: rgba(0, 104, 74, 0.1);
  --success-color: var(--color-success, #52c41a);
  --warning-color: var(--color-warning, #faad14);
  --error-color: var(--color-error, #ff4d4f);
  --text-color: rgba(0, 0, 0, 0.85);
  --text-secondary: rgba(0, 0, 0, 0.45);
  --border-color: #f0f0f0;
  --bg-gray: #f5f5f5;
}

/* 页面布局 */
.document-upload-page .page-header {
  @apply flex justify-between items-center mb-4;
}

.document-upload-page .page-title {
  @apply text-xl font-medium;
}

/* 表单样式 */
.document-upload-page .form-group {
  @apply mb-4;
}

.document-upload-page .form-label {
  @apply block font-medium text-gray-700 mb-2;
}

.document-upload-page .form-tip {
  @apply text-xs text-gray-500 mt-1;
}

/* 文件列表区域 */
.document-upload-page .file-list {
  @apply mt-6;
}

.document-upload-page .file-item {
  @apply flex items-center p-3 border border-gray-200 rounded-md mb-3 bg-white;
}

.document-upload-page .file-item:hover {
  @apply bg-gray-50;
}

.document-upload-page .file-info {
  @apply flex-1 ml-3;
}

.document-upload-page .file-name {
  @apply font-medium mb-1;
}

.document-upload-page .file-meta {
  @apply text-xs text-gray-500 flex items-center;
}

.document-upload-page .file-size {
  @apply mr-4;
}

.document-upload-page .progress-bar {
  @apply h-1 bg-gray-100 rounded overflow-hidden mt-2 w-full;
}

.document-upload-page .progress-bar-inner {
  @apply h-full bg-[var(--primary-color)] rounded transition-[width] duration-300 ease-out;
}

.document-upload-page .file-actions {
  @apply flex items-center;
}

/* 批量操作区域 */
.document-upload-page .batch-actions {
  @apply flex justify-between items-center p-2 bg-gray-50 border border-gray-200 rounded-md mb-4;
}

/* 高级选项区域 */
.document-upload-page .advanced-options {
  @apply mt-4;
}

.document-upload-page .advanced-options-toggle {
  @apply text-[var(--primary-color)] cursor-pointer inline-flex items-center text-sm;
}

.document-upload-page .advanced-options-toggle i {
  @apply ml-1 transition-transform duration-200;
}

.document-upload-page .advanced-options-toggle.open i {
  @apply rotate-180;
}

.document-upload-page .advanced-options-content {
  @apply mt-3 p-3 bg-gray-50 border border-gray-200 rounded-md hidden;
}

/* 提醒横幅 */
.document-upload-page .alert {
  @apply p-3 flex items-center rounded-md mb-4;
}

.document-upload-page .alert i {
  @apply mr-2;
}

.document-upload-page .alert-success {
  @apply bg-green-50 text-green-700 border border-green-200;
}

.document-upload-page .alert-info {
  @apply bg-blue-50 text-blue-700 border border-blue-200;
}

.document-upload-page .alert-warning {
  @apply bg-yellow-50 text-yellow-700 border border-yellow-200;
}

.document-upload-page .alert-error {
  @apply bg-red-50 text-red-700 border border-red-200;
}

/* 完成操作区域 */
.document-upload-page .upload-complete-actions {
  @apply text-center py-4 hidden;
}

/* 复选框样式 */
.document-upload-page .switch-container {
  @apply flex items-center mt-2;
}

.document-upload-page .switch {
  @apply relative inline-block w-10 h-5 mr-2;
}

.document-upload-page .switch input {
  @apply opacity-0 w-0 h-0;
}

.document-upload-page .slider {
  @apply absolute cursor-pointer inset-0 bg-gray-300 rounded-full transition-all duration-300;
}

.document-upload-page .slider:before {
  @apply absolute content-[''] h-4 w-4 left-0.5 bottom-0.5 bg-white rounded-full transition-all duration-300;
}

.document-upload-page input:checked + .slider {
  @apply bg-[var(--primary-color)];
}

.document-upload-page input:checked + .slider:before {
  @apply transform translate-x-5;
}

/* 响应式调整 */
@screen md {
  .document-upload-page .form-grid {
    @apply grid grid-cols-2 gap-6;
  }
}