web/apps/bigmember_pc/src/views/article-content/components/ContentError.vue

<template>
  <div class="error-module">
    <div class="error-module-container">
      <img class="error-img" src="@/assets/images/empty/jy-back.png">
      <p class="error-text">{{ errorText }}</p>
      <p class="error-text">5s后自动跳转到剑鱼官网首页</p>
      <button class="error-btn" @click="backHome">前往剑鱼官网首页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Error',
  props: {
    errorText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  mounted() {
    setTimeout(() => {
      window.top.location.href = '/'
    }, 5000)
  },
  methods: {
    backHome() {
      window.top.location.href = '/'
    }
  }
}
</script>

<style lang="scss" scoped>
.error-module {
  width: 980px;
  height: 580px;
  margin-right: 24px;
  background: #fff;
  border-radius: 8px;
  &-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 128px 0;
    height: 100%;
    .error-img{
      width: 200px;
      height: 200px;
      object-fit: contain;
    }
    .error-text{
      margin-top: 4px;
      font-size: 15px;
      color: #999;
      line-height: 22px;
    }
    .error-btn{
      width: 180px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin-top: 24px;
      background: #2ABED1;
      color: #fff;
      font-size: 15px;
      border-radius: 4px;
    }
  }
}
</style>