<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>
</head>
<style type="text/css">
  .error-main p{
        width: 100%;
        color: #333333;
        text-align: center;
        font-size: 18px;
        letter-spacing: 1px;
    }
    html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    .error-main {
        margin: 0 auto; /*水平居中*/
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-60%);

    }  
    .time{
            width: 50px;
            display: inline-block;
            color: #428dd8;
    }
</style>
<body>
<div class="error-main">
    <p><img src="./assets/images/error_404.png" alt="" ></p>
    <p>找不到页面了，系统将在<span class="time" id="time">5秒</span>后自动返回首页</p>
    <p><a style="width:3rem" href="/">
        <img src="./assets/images/back.png" alt="" width="88px">
    </a></p>
</div>
</body>
<script>
var timName = document.getElementById('time');
var t = 5;
var timer = setInterval(function(){
    timName.innerHTML = t + '秒';
    t--;
if(t<0){
    clearInterval(timer);
    window.location.href="/"
}
}, 1000)
</script>
</html>