<template>
  <div class="gl-page-content-grey">
    <div class="content">
      <div class="title">404</div>
      <div class="tip">页面找不到了~</div>
      <el-button :icon="House" class="btn" type="primary" @click="goBackFun">返回首页</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { House } from '@element-plus/icons-vue';

const router = useRouter();

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

<style lang="scss" scoped>
.gl-page-content-grey {
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 600px;
    height: 500px;
    background-color: var(--el-bg-color);
    border-radius: 20px;
    .title {
      font-size: 100px;
      font-weight: bold;
      color: var(--el-text-color-regular);
    }
    .tip {
      font-size: 20px;
      color: var(--el-text-color-secondary);
    }
    .btn {
      margin-top: var(--margin-huge);
    }
  }
}
</style>
