
<style>

  .pic-404 {
    position: relative;
    margin-left: 35%;
    width: 500px;
    overflow: hidden;
  }
  .pic-404__parent {
    width: 90%;
  }
  .pic-404__child {
    width: 17%;
  }
  .my-font{
    margin-left: 15%;
    margin-top: 6%;
    position: relative;
    width: 300px;
    padding: 30px 0;
    overflow: hidden;
  }
  .my-font .m404{
    font-size: 30px;
    /*color: #bababe;*/
  }
  .my-font .detail{
    font-size: 15px;
    color: #bababe;
  }

  .bullshit__return-home{
    display: block;
    float: left;
    width: 110px;
    height: 36px;
    background: #1482f0;
    border-radius: 100px;
    text-align: center;
    color: #ffffff;
    opacity: 1;
    font-size: 14px;
    line-height: 36px;
    cursor: pointer;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }
</style>

<template>
  <div class="pic-404">
    <img class="pic-404__parent" src="../../assets/404_images/404.png" alt="404">
    <img class="pic-404__child left" src="../../assets/404_images/404_cloud.png" alt="404">
    <img class="pic-404__child mid" src="../../assets/404_images/404_cloud.png" alt="404">
    <img class="pic-404__child right" src="../../assets/404_images/404_cloud.png" alt="404">
    <div class="my-font">
      <p class="m404">同学你迷路了~~~ </p>
      <p class="detail">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</p>
      <a href="/" class="bullshit__return-home">返回首页</a>
    </div>
  </div>
</template>
