<template>
  <div class="wrapper">
    <div class="content">
      <div class="page404-bg"></div>
      <p class="page404-text">{{ errorMsg }}</p>
    </div>
  </div>
</template>

<script>
export default {
    name: 'Error',
    data () {
        return {
            errorMsg: 'Sorry！您访问的页面不存在...'
        }
    },
    components: {
    },
    created () {
        this.errorMsg = this.$route.query.msg ? decodeURIComponent(this.$route.query.msg) : 'Sorry！您访问的页面不存在...'
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
@import '~styles/varibles.less';
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #a9a9a9;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    .page404-bg {
      background-image: url('@{staticFileDomain}/Common/404.png');
      background-repeat: no-repeat;
      background-size: 100% 100%
    }
     @media screen and (min-width: 640px) {
      .page404-bg{
        width:484px;
        height: 380px
      }
      .page404-text {
        margin-top: 30px;
        font-size: 26px
      }
    }
    @media screen and (min-width: 320px) and (max-width:640px) {
     .page404-bg{
        width:320px;
        height: 251px
      }
      .page404-text {
        margin-top: 10px;
        font-size: 18px
      }
    }
  }
}
</style>
