<template>
  <section class="text-center">
    <div class="error-card">
      <div class="img-wrap select-none" style="width: 240px; height: 180px;">
        <img :src="require('@/assets/img/403.png')" alt="403" />
      </div>
      <slot>
        <p class="my-20px">很抱歉，您没有访问权限，请联系管理员开通相关权限。</p>
        <el-button type="primary" @click="handleBack">回首页</el-button>
      </slot>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Error403',
  data() {
    return {}
  },
  mounted() {},
  methods: {
    handleBack() {
      location.href = '/'
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  position: relative;
  width: 100%;
  height: 100%;
  .error-card {
    width: 900px;
    height: 412px;
    position: absolute;
    z-index: 2;
    left: calc((100vw - 900px) / 2);
    top: calc((100vh - 512px) / 2);
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(33, 76, 217, 0.2);
    .img-wrap {
      margin: 0 auto;
      padding-top: 70px;
    }
    p {
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      color: var(--color-grey9);
    }
  }
}
</style>
