.uploadContainer { width: 100%; // 自定义上传组件样式 :global { .adm-image-uploader { .adm-image-uploader-upload-button { width: 100px; height: 100px; border: 1px dashed #d9d9d9; border-radius: 8px; background: #fafafa; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; &:hover { border-color: #1677ff; background: #f0f8ff; } .adm-image-uploader-upload-button-icon { font-size: 32px; color: #999; } } .adm-image-uploader-item { width: 100px; height: 100px; border-radius: 8px; overflow: hidden; position: relative; .adm-image-uploader-item-image { width: 100%; height: 100%; object-fit: cover; } .adm-image-uploader-item-delete { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; cursor: pointer; } .adm-image-uploader-item-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; } } } } } // 禁用状态 .uploadContainer.disabled { opacity: 0.6; pointer-events: none; } // 错误状态 .uploadContainer.error { :global { .adm-image-uploader-upload-button { border-color: #ff4d4f; background: #fff2f0; } } } // 响应式设计 @media (max-width: 768px) { .uploadContainer { :global { .adm-image-uploader { .adm-image-uploader-upload-button, .adm-image-uploader-item { width: 80px; height: 80px; } .adm-image-uploader-upload-button-icon { font-size: 28px; } } } } }