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>