<template>
  <div class="err-container">
    <img class="error-404" src="@/assets/images/404.png" alt="页面未找到" />
    <div class="tit">{{ $t('components.errorPages.404page.errStr') }}...</div>
    <div style="height: 20px; width: 100%;"></div>
    <el-button type="primary" @click="goIndex">{{ $t('components.errorPages.404page.goBack') }}</el-button>
    <el-button type="primary" @click="goPrev">{{ $t('components.errorPages.404page.goNext') }}</el-button>
    <div style="height: 50px; width: 100%;"></div>
  </div>
</template>

<script>
export default {
  mounted () {},
  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-404 {
    display: block;
    width: 60%;
    max-width: 600px;
    margin: 10% auto;
  }
  .tit {
    font-size: 24px;
    color: #313131;
    text-align: center;
  }
}
</style>
