| 634 | } |
| 635 | |
| 636 | function showMsg(title, content) { |
| 637 | // 检查并创建容器(如果不存在) |
| 638 | let container = document.getElementById('messageContainer') |
| 639 | if (!container) { |
| 640 | container = document.createElement('div') |
| 641 | container.id = 'messageContainer' |
| 642 | container.style.position = 'fixed' |
| 643 | container.style.bottom = '20px' |
| 644 | container.style.right = '20px' |
| 645 | container.style.zIndex = '1000' |
| 646 | document.body.appendChild(container) |
| 647 | } else { |
| 648 | // 如果容器已存在,先移除旧弹窗 |
| 649 | const oldMessage = container.querySelector('div') |
| 650 | if (oldMessage) { |
| 651 | oldMessage.style.transform = 'translateX(120%)' |
| 652 | oldMessage.style.opacity = '0' |
| 653 | setTimeout(() => { |
| 654 | container.removeChild(oldMessage) |
| 655 | }, 300) |
| 656 | } |
| 657 | } |
| 658 | |
| 659 | // 创建弹窗元素 |
| 660 | const messageBox = document.createElement('div') |
| 661 | messageBox.style.width = '240px' |
| 662 | messageBox.style.minHeight = '100px' |
| 663 | messageBox.style.background = 'linear-gradient(135deg, #ff6b6b, #ff8e8e)' |
| 664 | messageBox.style.borderRadius = '8px' |
| 665 | messageBox.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)' |
| 666 | messageBox.style.padding = '15px' |
| 667 | messageBox.style.color = 'white' |
| 668 | messageBox.style.fontFamily = 'Arial, sans-serif' |
| 669 | messageBox.style.display = 'flex' |
| 670 | messageBox.style.flexDirection = 'column' |
| 671 | messageBox.style.transform = 'translateX(120%)' |
| 672 | messageBox.style.transition = 'transform 0.3s ease-out' |
| 673 | messageBox.style.opacity = '0' |
| 674 | messageBox.style.transition = 'opacity 0.3s ease, transform 0.3s ease' |
| 675 | messageBox.style.overflow = 'hidden' |
| 676 | |
| 677 | // 创建标题元素 |
| 678 | const titleElement = document.createElement('div') |
| 679 | titleElement.style.fontSize = '18px' |
| 680 | titleElement.style.fontWeight = 'bold' |
| 681 | titleElement.style.marginBottom = '10px' |
| 682 | titleElement.style.borderBottom = '1px solid rgba(255, 255, 255, 0.3)' |
| 683 | titleElement.style.paddingBottom = '8px' |
| 684 | titleElement.textContent = title |
| 685 | |
| 686 | // 创建内容元素 |
| 687 | const contentElement = document.createElement('div') |
| 688 | contentElement.style.fontSize = '14px' |
| 689 | contentElement.style.flexGrow = '1' |
| 690 | contentElement.style.overflow = 'auto' |
| 691 | contentElement.textContent = content |
| 692 | |
| 693 | // 组装元素 |