wangzhuo

src/views/404.vue

@@ -1,15 +1,33 @@
 <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">
+        <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 style="color:#909399; font-size: 14px">
+            请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
+          </div>
+          <!-- 返回首页按钮 -->
+          <el-button
+            style="margin-top: 20px"
+            type="primary"
+            round
+            @click="handleGoMain"
+          >
+            返回首页
+          </el-button>
         </div>
       </el-col>
     </div>
@@ -17,33 +35,50 @@
 </template>
 
 <script>
+  // 导入 404 图片资源
   import img_404 from '@/assets/images/gif_404.gif';
 
   export default {
-    name: 'wrongPage',
+    name: 'wrongPage', // 组件名称
     data() {
       return {
+        // 404 错误图片路径
         img_404
-      }
+      };
     },
     methods: {
+      /**
+       * 返回首页的处理函数
+       * 将用户重定向到主页
+       */
       handleGoMain() {
-        this.$router.push({path: '/'})
+        this.$router.push({ path: '/' });
       }
     },
-  }
+  };
 </script>
 
 <style scoped>
+  /* 页面主容器样式 */
   .app-container {
     width: 80%;
-    margin: 120px auto;
+    margin: 120px auto; /* 页面居中，距离顶部 120px */
+    display: flex; /* 使用 flex 布局 */
+    align-items: center; /* 垂直居中 */
   }
 
+  /* 404 图片样式 */
   .img-style {
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
+    width: auto; /* 宽度自适应 */
+    height: auto; /* 高度自适应 */
+    max-width: 100%; /* 图片最大宽度不超过容器 */
+    max-height: 100%; /* 图片最大高度不超过容器 */
+  }
+
+  /* 标题主颜色样式 */
+  .color-main {
+    color: #409EFF; /* 标题颜色 */
+    font-size: 48px; /* 字体大小 */
+    font-weight: bold; /* 加粗字体 */
   }
 </style>