/* 提示消息组件样式 */ .hint-view { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000002; pointer-events: none; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .hint-view.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .hint-view.hide { opacity: 0; transform: translateX(-50%) translateY(-20px); pointer-events: none; } .hint-content { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); min-width: 200px; max-width: 400px; font-size: 14px; font-weight: 500; } .hint-icon { flex-shrink: 0; width: 20px; height: 20px; color: white; } .hint-message { flex: 1; text-align: center; } /* 成功提示样式 */ .hint-view.success .hint-content { background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%); box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4); } /* 错误提示样式 */ .hint-view.error .hint-content { background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%); box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4); } /* 警告提示样式 */ .hint-view.warning .hint-content { background: linear-gradient(135deg, #faad14 0%, #d48806 100%); box-shadow: 0 4px 12px rgba(250, 173, 20, 0.4); } /* 信息提示样式 */ .hint-view.info .hint-content { background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4); }