<html>
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>出错啦</title>
        <style>
            @media screen and (max-width: 600px) {  
                /* 针对手机设备的样式 */  
                body {  
                    width: 100%;
                    height: 100%; 
                    overflow: hidden;
                }  

                .error-page {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    background-color: white;
                }

                .error-page .content-con {
                    display: flex;
                    justify-content: center;
                    margin-top: 250px;
                    img{
                        width: 100%;
                    };
                }

                .error-page .content-con .text-con {
                    position: absolute;
                    top: 40%;
                }

                .error-page .content-con .text-con .errorCode {
                    text-align: center;
                    font-size: 80px;
                    font-weight: 700;
                    color: black;
                    /* width: 576px; */
                }

                .error-page .content-con .text-con .errorText {
                    width: 300px;
                    text-align: center;
                    left: 0px;
                    top: 50px;
                    font-size: 20px;
                    font-weight: 700;
                    color: #67647D;
                }

            }  

            @media screen and (min-width: 768px) {  
                body {  
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                } 
                /* 针对平板或桌面设备的样式 */  
                .error-page {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    background-color: white;
                }

                .error-page .content-con {
                    display: flex;
                    justify-content: center;
                    /* margin-top: 250px; */
                }

                .error-page .content-con .text-con {
                    position: absolute;
                    top: 50%;
                }

                .error-page .content-con .text-con .errorCode {
                    text-align: center;
                    font-size: 80px;
                    font-weight: 700;
                    color: black;
                    width: 576px;
                }

                .error-page .content-con .text-con .errorText {
                    position: absolute;
                    width: 576px;
                    text-align: center;
                    left: 0px;
                    top: 120px;
                    font-size: 20px;
                    font-weight: 700;
                    color: #67647D;
                }
            }
        </style>
    </head>
    <body>
        <div class="error-page">
            <div class="content-con">
                <img id="errorImg" alt="404"> 
                <!-- <div class="text-con">
                    <div id="errorCode" class="errorCode">404</div> 
                    <div class="errorText">系统开小差了，正在努力修复中，请稍后再试~</div>
                </div> -->
            </div>
        </div>
    </body>
    <script>
        var errorCodeDiv = document.getElementById("errorCode");
        var errorCode = getURLParameter("code");
        // errorCodeDiv.innerHTML = errorCode;

        var errorImg = document.getElementById("errorImg");
        if(errorCode == 500 || errorCode == 502){
            errorImg.src = errorCode + ".png";
        }else{
            errorImg.src = "./404.png";
        }

        function getURLParameter(name) {  
            // 获取当前URL的查询字符串部分  
            const search = window.location.search;  
            // 去除查询字符串开头的问号（?）  
            const params = new URLSearchParams(search.substring(1));  
            // 返回指定参数的值  
            return params.get(name);  
        } 

    </script>

</html>