tab3.page.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <ion-header [translucent]="true">
  2. <!-- 顶部标题栏 -->
  3. <div class="header">
  4. <div class="header-title">消息</div>
  5. <button class="clear-btn">一键清除</button>
  6. </div>
  7. </ion-header>
  8. <ion-content [fullscreen]="true">
  9. <!-- 内容区域 -->
  10. <div class="content">
  11. <!-- 消息通知卡片 -->
  12. <div class="notification-card">
  13. <div class="notification-title">点击打开消息通知</div>
  14. <div class="notification-desc">把握与TA的互动机会</div>
  15. </div>
  16. <!-- 好友匹配卡片 -->
  17. <div class="match-card">
  18. <div class="match-info">
  19. <div class="match-title">此刻匹配</div>
  20. <div class="match-desc">给此刻在线的ta们say hi</div>
  21. </div>
  22. <i class="match-icon ion-ios-arrow-forward"></i>
  23. </div>
  24. <!-- 聊天列表 -->
  25. <div class="chat-list">
  26. <!-- 聊天1 -->
  27. <div class="chat-item">
  28. <div class="chat-avatar">
  29. <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='20' fill='%23f0e6d6'/><path d='M30,65 Q50,80 70,65' stroke='%23f0e6d6' stroke-width='10' fill='none'/></svg>" alt="用户头像">
  30. </div>
  31. <div class="chat-content">
  32. <div class="chat-name">阳光小筑</div>
  33. <div class="chat-message">你今天的心情怎么样?我刚刚看到一篇不错的文章...</div>
  34. </div>
  35. <div class="chat-right">
  36. <div class="chat-time">12:30</div>
  37. <div class="chat-badge">3</div>
  38. </div>
  39. </div>
  40. <!-- 聊天2 -->
  41. <div class="chat-item">
  42. <div class="chat-avatar">
  43. <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='20' fill='%23d4b483'/><path d='M30,65 Q50,80 70,65' stroke='%23d4b483' stroke-width='10' fill='none'/></svg>" alt="用户头像">
  44. </div>
  45. <div class="chat-content">
  46. <div class="chat-name">树洞倾听者</div>
  47. <div class="chat-message">我明白你的感受,这种时候确实会很难过...</div>
  48. </div>
  49. <div class="chat-right">
  50. <div class="chat-time">10:15</div>
  51. <div class="chat-badge">1</div>
  52. </div>
  53. </div>
  54. <!-- 聊天3 -->
  55. <div class="chat-item">
  56. <div class="chat-avatar">
  57. <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='20' fill='%23b38a58'/><path d='M30,65 Q50,80 70,65' stroke='%23b38a58' stroke-width='10' fill='none'/></svg>" alt="用户头像">
  58. </div>
  59. <div class="chat-content">
  60. <div class="chat-name">情绪管理师</div>
  61. <div class="chat-message">试试这个呼吸练习:吸气4秒,屏息4秒,呼气6秒...</div>
  62. </div>
  63. <div class="chat-right">
  64. <div class="chat-time">昨天</div>
  65. <div class="chat-badge"></div>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <script>
  71. // 一键清除功能
  72. document.querySelector('.clear-btn').addEventListener('click', function() {
  73. if(confirm('确定要清除所有未读消息吗?')) {
  74. document.querySelectorAll('.chat-badge').forEach(badge => {
  75. badge.textContent = '';
  76. badge.style.backgroundColor = 'transparent';
  77. });
  78. alert('已清除所有未读消息');
  79. }
  80. });
  81. // 卡片点击效果
  82. document.querySelectorAll('.notification-card, .match-card').forEach(card => {
  83. card.addEventListener('click', function() {
  84. alert('跳转到对应功能页面');
  85. });
  86. });
  87. // 聊天项点击效果
  88. document.querySelectorAll('.chat-item').forEach(item => {
  89. item.addEventListener('click', function() {
  90. const name = this.querySelector('.chat-name').textContent;
  91. alert('进入与 ' + name + ' 的聊天');
  92. // 清除未读红点
  93. const badge = this.querySelector('.chat-badge');
  94. if(badge.textContent) {
  95. badge.textContent = '';
  96. badge.style.backgroundColor = 'transparent';
  97. }
  98. });
  99. });
  100. </script>
  101. </ion-content>