shuochen
/
VRSystem


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错误页面 - EasyTemplate后台系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000000d9;
            line-height: 1.5715;
        }
        
        .error-container {
            width: 90%;
            max-width: 520px;
            margin: 0 auto;
        }
        
        .error-card {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
            padding: 48px 32px;
            text-align: center;
            border: 1px solid #f0f0f0;
        }
        
        .error-image {
            width: 120px;
            height: 120px;
            margin: 0 auto 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #f0f7ff;
            border: 4px solid #e6f7ff;
        }
        
        .error-image svg {
            width: 60px;
            height: 60px;
            fill: #1890ff;
        }
        
        .error-code {
            font-size: 72px;
            font-weight: 600;
            color: #1890ff;
            margin-bottom: 8px;
            line-height: 1;
        }
        
        .error-title {
            font-size: 20px;
            font-weight: 500;
            color: #000000d9;
            margin-bottom: 16px;
        }
        
        .error-message {
            font-size: 14px;
            color: #00000073;
            line-height: 1.6;
            margin-bottom: 32px;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
        }
        
        .btn {
            height: 40px;
            padding: 8px 20px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            background: #ffffff;
            color: #000000d9;
        }
        
        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
            color: #ffffff;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-default:hover {
            border-color: #40a9ff;
            color: #40a9ff;
        }
        
        .error-details {
            margin-top: 24px;
            padding: 16px;
            background: #fafafa;
            border-radius: 6px;
            font-size: 14px;
            color: #00000073;
            text-align: left;
            border: 1px solid #f0f0f0;
        }
        
        @media (max-width: 768px) {
            .error-card {
                padding: 32px 20px;
            }
            
            .error-code {
                font-size: 60px;
            }
            
            .error-image {
                width: 100px;
                height: 100px;
                margin-bottom: 24px;
            }
            
            .error-image svg {
                width: 50px;
                height: 50px;
            }
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-card">
            <div class="error-image" id="errorImage">
                <svg viewBox="0 0 24 24" id="errorSvg">
                    <path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"/>
                </svg>
            </div>
            
            <h1 class="error-code" id="errorCode">500</h1>
            <h2 class="error-title" id="errorTitle">服务器错误</h2>
            <p class="error-message" id="errorMessage">抱歉，服务器遇到意外错误，无法完成您的请求。</p>
            
            <div class="action-buttons">
                <button id="loginBtn" class="btn btn-primary">返回登录页面</button>
                <button id="backBtn" class="btn btn-default">返回上页</button>
            </div>
            
            <div class="error-details" id="errorDetails" style="display: none;">
                <strong>详细信息：</strong>
                <div id="detailsContent"></div>
            </div>
        </div>
    </div>

    <script>
        // 从URL参数获取错误信息
        function getUrlParams() {
            const params = new URLSearchParams(window.location.search);
            return {
                code: params.get('code') || '500',
                title: params.get('title') || '服务器错误',
                message: params.get('message') || '抱歉，服务器遇到意外错误，无法完成您的请求。',
                image: params.get('image') || 'default'
            };
        }
        
        // 根据错误代码设置不同的图标和颜色
        function setErrorImage(code, imageType) {
            const errorImage = document.getElementById('errorImage');
            const errorSvg = document.getElementById('errorSvg');
            
            // 根据错误代码设置不同的颜色
            switch(code) {
                case '500':
                    errorImage.style.background = "#fff2f0";
                    errorImage.style.borderColor = "#ffccc7";
                    errorSvg.innerHTML = '<path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M16.59,7.58L10,14.17l-2.59-2.58L6,13l4,4l8-8L16.59,7.58z"/>';
                    errorSvg.style.fill = "#ff4d4f";
                    break;
                case '404':
                    errorImage.style.background = "#fff7e6";
                    errorImage.style.borderColor = "#ffd591";
                    errorSvg.innerHTML = '<path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"/>';
                    errorSvg.style.fill = "#fa8c16";
                    break;
                case '403':
                    errorImage.style.background = "#f6ffed";
                    errorImage.style.borderColor = "#b7eb8f";
                    errorSvg.innerHTML = '<path d="M18,8h-1V6c0-2.76-2.24-5-5-5S7,3.24,7,6v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,17c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S13.1,17,12,17z M15.1,8H8.9V6c0-1.71,1.39-3.1,3.1-3.1c1.71,0,3.1,1.39,3.1,3.1V8z"/>';
                    errorSvg.style.fill = "#52c41a";
                    break;
                case '502':
                    errorImage.style.background = "#f9f0ff";
                    errorImage.style.borderColor = "#d3adf7";
                    errorSvg.innerHTML = '<path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M16,15H8v-2h8V15z M16,11H8V9h8V11z"/>';
                    errorSvg.style.fill = "#722ed1";
                    break;
                case '503':
                    errorImage.style.background = "#e6f7ff";
                    errorImage.style.borderColor = "#91d5ff";
                    errorSvg.innerHTML = '<path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M16,15H8v-2h8V15z M16,11H8V9h8V11z M16,7H8V5h8V7z"/>';
                    errorSvg.style.fill = "#1890ff";
                    break;
                default:
                    errorImage.style.background = "#f0f7ff";
                    errorImage.style.borderColor = "#e6f7ff";
                    errorSvg.innerHTML = '<path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"/>';
                    errorSvg.style.fill = "#1890ff";
            }
            
            // 如果有自定义图片类型，使用自定义设置
            if (imageType && imageType !== 'default') {
                switch(imageType) {
                    case 'warning':
                        errorImage.style.background = "#fff7e6";
                        errorImage.style.borderColor = "#ffd591";
                        errorSvg.style.fill = "#fa8c16";
                        break;
                    case 'error':
                        errorImage.style.background = "#fff2f0";
                        errorImage.style.borderColor = "#ffccc7";
                        errorSvg.style.fill = "#ff4d4f";
                        break;
                    case 'info':
                        errorImage.style.background = "#e6f7ff";
                        errorImage.style.borderColor = "#91d5ff";
                        errorSvg.style.fill = "#1890ff";
                        break;
                }
            }
        }
        
        // 更新页面内容
        function updateErrorPage() {
            const params = getUrlParams();
            
            document.getElementById('errorCode').textContent = params.code;
            document.getElementById('errorTitle').textContent = params.title;
            document.getElementById('errorMessage').textContent = params.message;
            
            setErrorImage(params.code, params.image);
        }
        
        // 返回登录页面
        document.getElementById('loginBtn').addEventListener('click', function() {
            // 保持相同的IP和域名，只改变路径
            window.location.href = '/account/login';
        });
        
        // 返回上页
        document.getElementById('backBtn').addEventListener('click', function() {
            history.back();
        });
        
        // 页面加载时应用URL参数
        document.addEventListener('DOMContentLoaded', () => {
            updateErrorPage();
        });
    </script>
</body>
</html>