msg.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .body ,*{
  6. margin: 0;
  7. padding: 0;
  8. }
  9. .msg-card {
  10. border-radius: 8px;
  11. padding: 16px;
  12. margin: 12px;
  13. box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  14. display: flex;
  15. gap: 12px;
  16. border-left: 4px solid;
  17. bottom: 10px;
  18. }
  19. .msg-card.success {
  20. border-color: #4CAF50;
  21. background: #f1f8e9;
  22. }
  23. .msg-card.error {
  24. border-color: #f44336;
  25. background: #ffebee;
  26. }
  27. .icon-wrapper {
  28. font-size: 1.5em;
  29. flex-shrink: 0;
  30. }
  31. .success .icon-wrapper { color: #2e7d32; }
  32. .error .icon-wrapper { color: #c62828; }
  33. .msg-content {
  34. flex-grow: 1;
  35. }
  36. .msg-title {
  37. font-weight: 500;
  38. margin-bottom: 4px;
  39. }
  40. @media (max-width: 480px) {
  41. .msg-card {
  42. margin: 8px;
  43. padding: 12px;
  44. }
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="msg-card {{msgtype}}">
  50. <div class="icon-wrapper">
  51. {{if msgtype == 'success'}}✅{{else}}❌{{/if}}
  52. </div>
  53. <div class="msg-content">
  54. <div class="msg-title">
  55. {{if msgtype == 'success'}}操作成功{{else}}发生错误{{/if}}
  56. </div>
  57. <div class="msg-text">{{ecomsg}}</div>
  58. </div>
  59. </div>
  60. </body>
  61. </html>