<template lang="html">
  <div class="Absolute-Center" style="color: gray;">
    <img :src="bgImg" alt="">
    <div  style="margin-top: 20px;">
      <span style="margin-right: 10px;">抱歉 ! 您访问的页面出错了</span>
      <router-link to="/">返回首页</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ErrorPage',
  data () {
    return {
      bgImg: require('../../assets/images/404_1.png')
    }
  }
}
</script>

<style>
  body {
    background-color: white;
  }

  .Center-Container {
    position: relative;
  }

  .Absolute-Center {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
  }
</style>