<template>
    <div class="not-found">
        <div class="not-found-content">
            <el-result icon="error" title="404" sub-title="抱歉，您访问的页面不存在">
                <template #extra>
                    <el-button type="primary" @click="goToHome">返回首页</el-button>
                </template>
            </el-result>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
    name: 'NotFound',
    setup() {
        const router = useRouter();

        const goToHome = () => {
            router.push('/');
        };

        return {
            goToHome
        };
    }
};
</script>

<style lang="scss" scoped>
.not-found {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px - 100px);

    .not-found-content {
        max-width: 500px;
        width: 100%;
    }
}
</style>