You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.8 KiB
62 lines
1.8 KiB
<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>
|