<template>
  <div class="err-container">
    <img class="error-500" src="@/assets/images/500.png" alt="服务器错误" />
    <div class="tit">很抱歉，您访问的服务器出错...</div>
    <div style="height: 20px; width: 100%;"></div>
    <el-button type="primary" @click="goIndex">返回首页</el-button>
    <el-button type="primary" @click="goPrev">返回上一页</el-button>
    <div style="height: 50px; width: 100%;"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    // this.VueEvent.$emit('headerChange', '1-error') // 修改 头部导航
  },
  methods: {
    goIndex () {
      // this.$router.push({ path: '/' })
      this.$router.replace({
          path: '/'
      })
    },
    goPrev () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.err-container {
  width: 100%;
  // height: 100%;
  text-align: center;
  overflow: hidden;
  .error-500 {
    display: block;
    width: 60%;
    max-width: 600px;
    margin: 10% auto;
  }
  .tit {
    font-size: 24px;
    color: #313131;
    text-align: center;
  }
}
</style>
