m2pool_web_frontend/mining-pool/src/views/page404.vue

<template>
    <div class="wscn-http404-container">
      <div class="wscn-http404">
        <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>
        <div class="bullshit">
          <div class="bullshit__oops">
            404
          </div>
          <div class="bullshit__headline">
            {{ $t(message) }} 
          </div>
          <div class="bullshit__info">
            {{ $t(`user.noPage`) }}
          </div>
          <!-- <router-link to="/" class="bullshit__return-home">
            返回首页
          </router-link> -->
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'Page404',
    computed: {
      message() {
        return 'user.canTFind'
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .wscn-http404-container{
    // transform: translate(-50%,-50%);
    // position: absolute;
    // top: 40%;
    // left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
   height: 100vh;
   width: 100vw;
  }
  .wscn-http404 {
    position: relative;
    width: 1200PX;
    padding: 0 50PX ;
    overflow: hidden;
    .pic-404 {
      position: relative;
      float: left;
      width: 600PX;
      overflow: hidden;
      &__parent {
        width: 100%;
      }
      &__child {
        position: absolute;
        &.left {
          width: 80PX;
          top: 17PX;
          left: 220PX;
          opacity: 0;
          animation-name: cloudLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        &.mid {
          width: 46PX;
          top: 10PX;
          left: 420PX;
          opacity: 0;
          animation-name: cloudMid;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1.2s;
        }
        &.right {
          width: 62PX;
          top: 100PX;
          left: 500PX;
          opacity: 0;
          animation-name: cloudRight;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        @keyframes cloudLeft {
          0% {
            top: 17PX;
            left: 220PX;
            opacity: 0;
          }
          20% {
            top: 33PX;
            left: 188PX;
            opacity: 1;
          }
          80% {
            top: 81PX;
            left: 92PX;
            opacity: 1;
          }
          100% {
            top: 97PX;
            left: 60PX;
            opacity: 0;
          }
        }
        @keyframes cloudMid {
          0% {
            top: 10PX;
            left: 420PX;
            opacity: 0;
          }
          20% {
            top: 40PX;
            left: 360PX;
            opacity: 1;
          }
          70% {
            top: 130PX;
            left: 180PX;
            opacity: 1;
          }
          100% {
            top: 160PX;
            left: 120PX;
            opacity: 0;
          }
        }
        @keyframes cloudRight {
          0% {
            top: 100PX;
            left: 500PX;
            opacity: 0;
          }
          20% {
            top: 120PX;
            left: 460PX;
            opacity: 1;
          }
          80% {
            top: 180PX;
            left: 340PX;
            opacity: 1;
          }
          100% {
            top: 200PX;
            left: 300PX;
            opacity: 0;
          }
        }
      }
    }
    .bullshit {
      position: relative;
      float: left;
      width: 300PX;
      padding: 30PX 0;
      overflow: hidden;
      &__oops {
        font-size: 32PX;
        font-weight: bold;
        line-height: 40PX;
        color: #1482f0;
        opacity: 0;
        margin-bottom: 20PX;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }
      &__headline {
        font-size: 20PX;
        line-height: 24PX;
        color: #222;
        font-weight: bold;
        opacity: 0;
        margin-bottom: 10PX;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
      }
      &__info {
        font-size: 13PX;
        line-height: 21PX;
        color: grey;
        opacity: 0;
        margin-bottom: 30PX;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
      }
      &__return-home {
        display: block;
        float: left;
        width: 110PX;
        height: 36PX;
        background: #1482f0;
        border-radius: 100PX;
        text-align: center;
        color: #ffffff;
        opacity: 0;
        font-size: 14PX;
        line-height: 36PX;
        cursor: pointer;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
      }
      @keyframes slideUp {
        0% {
          transform: translateY(60PX);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
  }
  </style>