<template>
  <div class="container error-container">
    <div v-if="error.statusCode === 404" class="content-error">
      404
    </div>
    <div v-else  class="content-error">
      服务器开小差了
    </div>
    <nuxt-link to="/"><span class="to-home">首 页</span></nuxt-link>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    layout: 'blog' // 你可以为错误页面指定自定义的布局
  }
</script>
<style>
  .to-home{
    padding: 10px;
    color: #1bbb9f;
    border: 1px solid #1bbb9f;
    text-align: center;
  }
  .to-home:hover{
    background: #1bbb9f;
    color: #fff;
  }
  .error-container{
    width: 1120px;
    margin: 200px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px;
    align-items: center;
  }
  .content-error{
    height: 200px;
  }
</style>
