<template>
    <div class="error-page">
      <img :src="errorImageUrl">
      <div class="error-text">
        404! 很抱歉，页面未找到
        <br/>
        <div class="button" @click="$router.push({name:'index'})">返回首页</div>
      </div>
    </div>
</template>

<script>
  import errorImageUrl  from '../assets/error.png'
    export default {
        name: "error",
      data(){
          return{
            errorImageUrl:errorImageUrl
          }
      }
    }
</script>

<style scoped lang="less">
  .error-page{
    text-align: center;
    padding-top:50px ;
    img{
      width: 50%;
      margin-bottom: 20px;
    }
    .error-text{
      font-size: 24px;
      color: #888;
    }
    .button{
      font-size: 14px;
      display: inline-block;
      border: 1px solid #53b4ca;
      color: #53b4ca;
      padding: 5px;
      border-radius: 4px;
      margin-top: 20px;

    }
  }

</style>