<template>
    <div class="not-found">
        <img src="~assets/images/icon-status-404.png" alt />
        <p class="cl-blue text-middle">您的页面已经偏离地球了，请稍后在寻找一下吧～</p>
        <p>
            {{ num }}秒后系统自动进入
            <router-link to="/" class="cl-blue">首页</router-link>
        </p>
    </div>
</template>

<script>
import { clearInterval } from "timers";
let timer;
export default {
    name: "404",
    data() {
        return {
            num: 10
        };
    },
    created() {
        clearInterval(timer);
        let that = this;
        timer = setInterval(() => {
            that.num--;
            if (that.num < 1) {
                this.$router.replace({
                    path: "/"
                });
            }
        }, 1000);
    }
};
</script>

<style lang="less" scoped>
@import "../assets/styles/common.css";
.not-found {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 680px;
    height: 550px;
    margin: -275px 0 0 -340px;
}
.text-middle {
    margin: 40px 0 30px;
}
</style>
