12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>操作提示</title>
- <style>
- body {
- margin: 0;
- padding: 0;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #f5f5f5;
- font-family: Arial, sans-serif;
- }
- .alert-box {
- background: white;
- padding: 2rem 3rem;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- position: relative;
- text-align: center;
- min-width: 300px;
- }
- .success { color: #4CAF50; }
- .error { color: #f44336; }
- .close-btn {
- position: absolute;
- top: 10px;
- right: 15px;
- background: none;
- border: none;
- font-size: 1.2rem;
- cursor: pointer;
- color: #666;
- }
- .icon {
- font-size: 2.5rem;
- margin-bottom: 1rem;
- }
- .message {
- font-size: 1.1rem;
- margin: 0.5rem 0;
- }
- </style>
- </head>
- <body>
- <div class="alert-box">
- <button class="close-btn" onclick="closeAlert()">×</button>
- {{-- <div class="icon"></div>--}}
- <div class="message"> </div>
- <div class="countdown">5秒后自动关闭</div>
- </div>
- <script>
- // 获取URL参数
- const params = new URLSearchParams(window.location.search);
- const status = '{{$status}}';
- const message = '{{$message}}';
- // 设置内容
- document.querySelector('.alert-box').classList.add(status);
- // document.querySelector('.icon').textContent = status === 'success' ? '✓' : '✕';
- document.querySelector('.message').textContent = message;
- // 倒计时显示
- let seconds = 5;
- const countdownElement = document.querySelector('.countdown');
- const timer = setInterval(() => {
- seconds--;
- countdownElement.textContent = `${seconds}秒后自动关闭`;
- if (seconds <= 0) clearInterval(timer);
- }, 1000);
- // 关闭函数
- function closeAlert() {
- window.history.length > 1 ? window.history.back() : window.close();
- }
- // 5秒自动关闭
- setTimeout(closeAlert, 5000);
- </script>
- </body>
- </html>
|