<template>
    <div class="container pcContainer">
        <headB></headB>
        <div class="status-box">
          <div class="error-box">
            <img src="./img_ball.png" class="img_ball" alt="">
            <div class="status-right flex">
              <img src="./img_404.png" class="img_404">
              <p>抱歉，您访问的页面不存在...</p>

              <router-link to="/" class="default-btn">返回首页</router-link>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
            }
        },
        methods: {

        },
        mounted(){
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  /*@import "status.styl"*/
  .status-box{
    position absolute
    left 50%
    top 45%
    transform translate(-50%,-50%)
  }
  .error-box{
    display inline-block
    min-width 430px
  }
  .status-right{
    display inline-block
  }
  .img_ball{
    display inline-block
    width 260px
    height 230px
    margin-top -50px
  }
  .img_404{
    display inline-block
    width 152px
    height 92px
    margin-bottom 20px
  }
  .status-box .status-right p{
    font-size 12px
    color #a4b1b7
  }
  .status-box .status-right .default-btn{
    display inline-block
    text-align center
    border-radius 4px
    width 84px
    height 26px
    line-height 26px
    margin-top 30px
    font-size 12px
    border 1px solid #7b8f98
    color #7b8f98
    &:hover{
      background #7b8f98
      color #ffffff
    }
  }
</style>
