<template>
    <div class="error-page">
        <div class="img" :style="`background-image: url(${svg404});`" />
        <div class="content">
            <h1>404</h1>
            <div class="desc">
                抱歉，你访问的页面不存在
            </div>
            <div class="actions">
                <el-button type="primary" block @click="goToHome">
                    返回首页
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from '~src/router/index'
import svg404 from '~src/assets/view/404.svg'

defineOptions({
    name: '404',
})

const goToHome = () => {
    router.push({ path: '/' })
}
</script>

<style lang="scss" scoped>
@import "../../styles/error/style.scss";
</style>
