PC自定义错误页

## PC自定义错误页
### 1、新建错误页目录(注：有则忽略)

![](/media/202405/2024-05-07_090929_710271.png)

### 2、上传异常页面所需图片

![](/media/202405/2024-05-07_090948_091559.png)

### 3、定制异常页面

![](/media/202405/2024-05-07_091007_131130.png)

代码示例：
```html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>403页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

.hc_error {
            display: flex;
            align-items: center;
            height: 100vh;
        }

.hc_error_ctn {
            width: 90%;
            max-width: 1200px;
            margin: auto;
            display: flex;
        }

.hc_error_l {
            width: 45%;
        }

.hc_error_l img {
            width: 100%;
        }

.hc_error_r {
            width: 55%;
        }

.hc_error_r {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
        }

.hc_error_r2 {
            align-items: center;
        }

.hc_error_docm>h4 {
            font-size: 36px;
            font-weight: 700;
            color: #002c52;
            margin-bottom: 30px;
        }

.hc_error_docm>p {
            font-size: 16px;
            color: #5b5b5b;
            line-height: 30px;
        }

.hc_error_back {
            width: 100%;
        }

.hc_error_back>a {
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #fff;
            border-radius: 3px;
            background-color: rgb(0, 44, 82);
            width: 119px;
            height: 41px;
            margin-top: 50px;
        }

@media (max-width:1024px) {

.hc_error_ctn {
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

.hc_error_l {
                display: flex;
                justify-content: center;
                width: 100%;
                margin-bottom: 40px;
            }

.hc_error_r {
                width: 100%;
                align-items: center;
            }

.hc_error_docm>h4 {
                text-align: center;
                font-size: 20px;
            }

.hc_error_docm>p {
                text-align: center;
            }

.hc_error_back {
                display: flex;
                justify-content: center;
            }

}
    </style>
</head>

<body>
    <div class="hc_error">
        <div class=" hc_error_ctn">
            <div class="hc_error_l">
                
                <img src="/render/user/projectid/errorpage/image/403.png" alt="">
            </div>
            <div class="hc_error_r">
                <div class="hc_error_docm">
                    <h4>抱歉，您无权查看此页面!</h4>
                    <div class="hc_error_back">
                        <a href="/main.html?pn=projectid/user">返回首页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
```