404.vue

<template>
  <div class="w404" :style="{height:height}">
    <div class="test404">
      <div><img src="https://images.cnblogs.com/cnblogs_com/wulicute-TS/1972942/o_210510032940404.png" alt=""></div>
      <h2>抱歉，您访问的页面出错了</h2>
      <p>您可能输错了网址，或该网页已删除或不存在</p>
      <div class="go-1">
        <span class="blue" @click="go_index">返回主页</span>
        <span class="blue" @click="up_page">返回上一页</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "404",
  data() {
    return {
      height:''
    };
  },
  created() {
     this.height = document.documentElement.clientHeight + 'px';
  },
  methods: {
    up_page(){
      history.go(-1)
    },
    go_index(){
      window.location.href='/index'
    },
  },
  mounted() { 
    
  },
};
</script>
 
<style scoped>
.w404{
  width: 100%;
  background: url('https://images.cnblogs.com/cnblogs_com/wulicute-TS/1972942/o_210510032933404.jpg') no-repeat;
  background-size: 100% 100%;
}
h2{
      font-size: 32px;
    color: #fff;
    text-align: center;
    letter-spacing: 5px;
    padding-top: 33px;
    padding-bottom: 25px;
}
.test404{
      padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 120px;
}
.test404 img{
      display: block;
    margin: auto;
}
.test404 p{
      font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    padding-bottom: 35px;
}
.go-1{
  display: flex;
  width: 500px;
  margin: 0 auto;
}
.test404 span{
  display: block;
    margin: auto;
    width: 220px;
    height: 56px;
}
.blue{
      display: inline-block;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 3px;
    background: #7caced;
    color: #fff;
    letter-spacing: 5px;
    border: 0;
    font-size: 18px;
    padding: 0;
    text-decoration: none;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-property: background;
    transition-property: background;
}
</style>