<template>
  <!-- 400页面模板 -->
  <div class="site-wrapper site-page--not-found">
    <!-- 内容包裹器，用于设置页面整体布局 -->
    <div class="site-content__wrapper">
      <!-- 页面内容主体 -->
      <div class="site-content">
        <!-- 显示错误代码 -->
        <h2 class="not-found-title">400</h2>
        <!-- 描述错误信息 -->
        <p class="not-found-desc">
          抱歉！您访问的页面<em>失联</em>啦 ...
        </p>
        <!-- 返回上一页按钮 -->
        <el-button @click="$router.go(-1)">
          返回上一页
        </el-button>
        <!-- 进入首页按钮 -->
        <el-button
          type="primary"
          class="not-found-btn-gohome"
          @click="$router.push({ name: 'home' })"
        >
          进入首页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 此处可以添加脚本逻辑，目前此页面没有需要处理的业务逻辑，因此脚本部分为空。
// 使用 <script setup> 语法糖简化Vue组件定义，适用于组合式API。
</script>

<style lang="scss" scoped>
.site-wrapper.site-page--not-found {
  /* 设置页面占据整个浏览器窗口 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;

  .site-content__wrapper {
    /* 移除默认的内边距和外边距，并设置背景颜色 */
    padding: 0;
    margin: 0;
    background-color: #fff;
  }

  .site-content {
    /* 固定定位，使内容居中显示 */
    position: fixed;
    top: 15%;
    left: 50%;
    z-index: 2;
    padding: 30px;
    text-align: center;
    transform: translate(-50%, 0);

    .not-found-title {
      /* 错误代码样式 */
      margin: 20px 0 15px;
      font-size: 10em;
      font-weight: 400;
      color: rgb(55, 71, 79);
    }

    .not-found-desc {
      /* 错误描述样式 */
      margin: 0 0 30px;
      font-size: 26px;
      text-transform: uppercase;
      color: rgb(118, 131, 143);

      > em {
        /* 强调文字样式 */
        font-style: normal;
        color: #ee8145;
      }
    }

    .not-found-btn-gohome {
      /* 首页按钮样式，增加左边距以与返回按钮间隔开 */
      margin-left: 30px;
    }
  }
}
</style>
