<template>
  <div class="error">
    <div class="text-center">
      <img src="~@/assets/svgs/404.svg" alt="" />
    </div>
    <div class="text-center">
      <h1>抱歉，你访问的页面不存在</h1>
    </div>
    <ElButton type="primary" @click="goHome">回到首页</ElButton>
  </div>
</template>

<script lang="ts" setup>
import { routerTurnByName } from "@/utils";
function goHome() {
  routerTurnByName("home");
}
</script>

<style lang="scss" scoped>
.error {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 20px);
  height: 100vh;
  padding: 100px 0;
  overflow: hidden;
}

.text-center {
  h1 {
    padding: 20px 0;
    color: #666;
  }
}

img {
  width: 350px;
  margin: 0 auto;
}
</style>
