hint-view.css 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /* 提示消息组件样式(复制自 client/css/hint-view.css) */
  2. .hint-view {
  3. position: fixed;
  4. top: 20px;
  5. left: 50%;
  6. transform: translateX(-50%);
  7. z-index: 1000002;
  8. pointer-events: none;
  9. opacity: 0;
  10. transition: opacity 0.3s ease, transform 0.3s ease;
  11. }
  12. .hint-view.show {
  13. opacity: 1;
  14. transform: translateX(-50%) translateY(0);
  15. pointer-events: auto;
  16. }
  17. .hint-view.hide {
  18. opacity: 0;
  19. transform: translateX(-50%) translateY(-20px);
  20. pointer-events: none;
  21. }
  22. .hint-content {
  23. display: flex;
  24. align-items: center;
  25. gap: 10px;
  26. padding: 12px 20px;
  27. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  28. color: white;
  29. border-radius: 8px;
  30. box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  31. min-width: 200px;
  32. max-width: 400px;
  33. font-size: 14px;
  34. font-weight: 500;
  35. }
  36. .hint-icon {
  37. flex-shrink: 0;
  38. width: 20px;
  39. height: 20px;
  40. color: white;
  41. }
  42. .hint-message {
  43. flex: 1;
  44. text-align: center;
  45. }
  46. /* 成功提示样式 */
  47. .hint-view.success .hint-content {
  48. background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  49. box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
  50. }
  51. /* 错误提示样式 */
  52. .hint-view.error .hint-content {
  53. background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
  54. box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
  55. }
  56. /* 警告提示样式 */
  57. .hint-view.warning .hint-content {
  58. background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
  59. box-shadow: 0 4px 12px rgba(250, 173, 20, 0.4);
  60. }
  61. /* 信息提示样式 */
  62. .hint-view.info .hint-content {
  63. background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  64. box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  65. }