/** * 文档上传页面样式 */ .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; } }