mall-admin/src/views/404.vue

<template>
  <div>
    <!-- 页面主体容器 -->
    <div class="app-container">
      <!-- 左侧图片展示 -->
      <el-col :span="12">
        <!-- 显示 404 错误图片 -->
        <img :src="img_404" alt="404" class="img-style">
      </el-col>

      <!-- 右侧提示信息与按钮 -->
      <el-col :span="12">
        <div style="margin-left: 100px; margin-top: 60px">
          <!-- 错误标题 -->
          <h1 class="color-main">OOPS!</h1>
          <!-- 错误描述 -->
          <h2 style="color: #606266">很抱歉，页面它不小心迷路了！</h2>
          <!-- 进一步的操作提示 -->
          <div style="color:#909399; font-size: 14px">
            请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
          </div>
          <!-- 返回首页按钮 -->
          <el-button
            style="margin-top: 20px"
            type="primary"
            round
            @click="handleGoMain"
          >
            返回首页
          </el-button>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
  // 导入 404 图片资源
  import img_404 from '@/assets/images/gif_404.gif';

  export default {
    name: 'wrongPage', // 组件名称
    data() {
      return {
        // 404 错误图片路径
        img_404
      };
    },
    methods: {
      /**
       * 返回首页的处理函数
       * 将用户重定向到主页
       */
      handleGoMain() {
        this.$router.push({ path: '/' });
      }
    },
  };
</script>

<style scoped>
  /* 页面主容器样式 */
  .app-container {
    width: 80%;
    margin: 120px auto; /* 页面居中，距离顶部 120px */
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中 */
  }

  /* 404 图片样式 */
  .img-style {
    width: auto; /* 宽度自适应 */
    height: auto; /* 高度自适应 */
    max-width: 100%; /* 图片最大宽度不超过容器 */
    max-height: 100%; /* 图片最大高度不超过容器 */
  }

  /* 标题主颜色样式 */
  .color-main {
    color: #409EFF; /* 标题颜色 */
    font-size: 48px; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
  }
</style>