前端404页面

最新推荐文章于 2024-06-12 11:13:48 发布

努力的睿小宝

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量162

点赞数

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/weixin_44279243/article/details/125935873

版权

<template>
  <div class="bigContainer">
    <img class="container" src="../assets/photo/404.jpeg" />
    <el-button @click="goBack()" type="primary">返回主页找靠山</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    goBack() {
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="scss" scoped>
.bigContainer {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.container {
  height: 100%;
  width: 100%;
}
::v-deep .el-button {
  position: absolute;
  bottom: 23%;
  left: 17%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 30%;
  height: 10%;
  background-color: #048bab;
  font-size: 30px;
  letter-spacing: 20px;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background-color: #f99ca4;
  color: #003035;
}
</style>

点击按钮又跳转至home页面；

效果展示：图片自适应屏幕大小，且没有压缩图片