.confirm-dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .confirm-dialog-content { background: white; border-radius: 16px; width: 90%; max-width: 420px; padding: 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slideUp 0.3s ease-out; display: flex; flex-direction: column; align-items: center; text-align: center; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .confirm-dialog-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .confirm-dialog-icon.warning { background: #fff7e6; color: #fa8c16; } .confirm-dialog-icon.danger { background: #fff2f0; color: #ff4d4f; } .confirm-dialog-icon.info { background: #e6f7ff; color: #1890ff; } .confirm-dialog-body { margin-bottom: 28px; } .confirm-dialog-title { margin: 0 0 12px 0; font-size: 20px; font-weight: 600; color: #262626; } .confirm-dialog-message { margin: 0; font-size: 15px; color: #595959; line-height: 1.6; } .confirm-dialog-actions { display: flex; gap: 12px; width: 100%; } .confirm-dialog-btn { flex: 1; padding: 12px 24px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .confirm-dialog-btn.cancel { background: white; color: #595959; border: 1px solid #d9d9d9; } .confirm-dialog-btn.cancel:hover { color: #262626; border-color: #40a9ff; background: #fafafa; } .confirm-dialog-btn.confirm.warning { background: #fa8c16; color: white; } .confirm-dialog-btn.confirm.warning:hover { background: #ff9c2e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(250, 140, 22, 0.4); } .confirm-dialog-btn.confirm.danger { background: #ff4d4f; color: white; } .confirm-dialog-btn.confirm.danger:hover { background: #ff7875; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4); } .confirm-dialog-btn.confirm.info { background: #1890ff; color: white; } .confirm-dialog-btn.confirm.info:hover { background: #40a9ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4); } /* 响应式 */ @media (max-width: 640px) { .confirm-dialog-content { width: 95%; padding: 24px; } .confirm-dialog-icon { width: 64px; height: 64px; margin-bottom: 20px; } .confirm-dialog-icon svg { width: 36px; height: 36px; } .confirm-dialog-title { font-size: 18px; } .confirm-dialog-message { font-size: 14px; } .confirm-dialog-actions { flex-direction: column; } .confirm-dialog-btn { width: 100%; } }