pllx
47 lines
1.4 KiB
PHP
47 lines
1.4 KiB
PHP
{{--
|
||
文件功能：全局右下角 Toast 小卡片通知组件
|
||
|
||
提供全局 JS API：
|
||
window.chatToast.show({ title, message, icon?, color?, duration? })
|
||
- title: 卡片标题
|
||
- message: 卡片内容（支持 HTML）
|
||
- icon: 左侧 Emoji 图标（可选，默认 💬）
|
||
- color: 强调色 HEX（可选，默认 #336699）
|
||
- duration: 自动消失毫秒数（可选，默认 6000；0 = 不自动消失）
|
||
- action: { label, onClick } 可选操作按钮
|
||
|
||
使用示例：
|
||
window.chatToast.show({ title: '奖励金币', message: '你收到 100 枚金币！', icon: '💰', color: '#f59e0b' });
|
||
|
||
多条 Toast 从右下角向上堆叠，各自独立计时。
|
||
|
||
@author ChatRoom Laravel
|
||
@version 1.0.0
|
||
--}}
|
||
|
||
{{-- Toast 容器（固定右下角，由 JS 动态填充） --}}
|
||
<div id="chat-toast-container"
|
||
style="position:fixed; bottom:24px; right:24px; z-index:999998;
|
||
display:flex; flex-direction:column-reverse; gap:10px; pointer-events:none;">
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes toastSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(32px) scale(.96);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
#chat-toast-container {
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style>
|