<template>
  <!-- 主容器 -->
  <div class="content">
    <!-- 错误页面背景图 -->
    <img class="backgroud" src="@/assets/img/404.png" alt>

    <!-- 主要提示文本 -->
    <div class="text main-text">出错了...页面失踪了</div>

    <!-- 返回按钮区域 -->
    <div>
      <!-- 点击返回上一页的按钮 -->
      <el-button class="text" @click="back()" type="text" icon="el-icon-back">返回</el-button>
    </div>
  </div>
</template>

<script>
// 定义 Vue 组件
export default {
  // 方法集合
  methods: {
    // 返回操作方法：如果历史记录中存在上一页则返回，否则跳转到首页
    back() {
      // 判断浏览器历史栈深度是否大于1
      window.history.length > 1
        ? this.$router.go(-1)       // 返回上一页
        : this.$router.push("/");   // 否则跳转至首页
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;                  /* 使用弹性布局 */
  align-items: center;            /* 垂直居中 */
  flex-direction: column;         /* 子元素垂直排列 */
  width: 100%;                    /* 宽度占满父容器 */
  height: 100%;                   /* 高度占满父容器 */
  min-height: 900px;              /* 最小高度为900px */
  text-align: center;             /* 文字水平居中 */

  .backgroud {
    display: inline-block;        /* 行内块显示 */
    width: 200px;                 /* 图片宽度 */
    height: 200px;                /* 图片高度 */
    margin-top: 80px;             /* 上边距 */
  }

  .main-text {
    margin-top: 80px;             /* 提示文字顶部留白 */
  }

  .text {
    font-size: 24px;              /* 字体大小 */
    font-weight: bold;            /* 加粗字体 */
    color: #333;                  /* 字体颜色 */
  }
}
</style>
