/*404页面*/
<template>
  <div class="container">
    <div class="content">
      <div class="image">
        <el-image
          class="image_parent"
          :src="background"
          fit="cover"
          alt="404"
        />
        <el-image class="image_child left" :src="cloud" fit="cover" alt="404" />
        <el-image
          class="image_child middle"
          :src="cloud"
          fit="cover"
          alt="404"
        />
        <el-image
          class="image_child right"
          :src="cloud"
          fit="cover"
          alt="404"
        />
      </div>
      <div class="desc">
        <div class="desc_title">糟糕 !!!</div>
        <div class="desc_info">
          All rights reserved
          <a
            class="desc_link"
            href="https://www.xichain.com.cn"
            target="_blank"
          >xichain</a>
        </div>
        <div class="desc_headline">{{ message }}</div>
        <div class="desc_info">
          请检查您输入的网址是否正确，或单击下面的按钮返回主页。
        </div>
        <router-link class="desc_back" to="/indexLayout">返回主页</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import background from '@/assets/404_images/404.png'
import cloud from '@/assets/404_images/404_cloud.png'
export default {
  name: 'Fail404',
  data() {
    return {
      background: background,
      cloud: cloud
    }
  },
  computed: {
    message() {
      return '页面跑丢啦...'
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin cloud($width, $top, $left) {
  width: $width;
  top: $top;
  left: $left;
}
@mixin animation(
  $name,
  $duration: 2s,
  $timing: linear,
  $delay: 1s,
  $count: infinite
) {
  opacity: 0;
  animation-name: $name;
  animation-duration: $duration;
  animation-timing-function: $timing;
  animation-delay: $delay;
  animation-iteration-count: $count;
  animation-fill-mode: forwards;
}
@mixin keyframes($top, $left, $opacity: 0) {
  top: $top;
  left: $left;
  opacity: $opacity;
}
@mixin desc($size, $weight, $height, $color, $bottom) {
  font-size: $size;
  font-weight: $weight;
  line-height: $height;
  color: $color;
  margin-bottom: $bottom;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content {
  position: relative;
  width: 1200px;
  padding: 0 50px;
  overflow: hidden;
  .image {
    position: relative;
    float: left;
    width: 600px;
    overflow: hidden;
    &_parent {
      width: 100%;
    }
    &_child {
      position: absolute;
      &.left {
        @include cloud(80px, 17px, 220px);
        @include animation(cloudLeft);
      }
      &.middle {
        @include cloud(46px, 10px, 440px);
        @include animation(cloudMid);
      }
      &.right {
        @include cloud(62px, 100px, 500px);
        @include animation(cloudRight);
      }
      @keyframes cloudLeft {
        0% {
          @include keyframes(17px, 220px);
        }
        20% {
          @include keyframes(33px, 188px, 1);
        }
        80% {
          @include keyframes(81px, 92px, 1);
        }
        100% {
          @include keyframes(97px, 60px);
        }
      }
      @keyframes cloudMid {
        0% {
          @include keyframes(10px, 440px);
        }
        20% {
          @include keyframes(40px, 380px, 1);
        }
        70% {
          @include keyframes(130px, 200px, 1);
        }
        100% {
          @include keyframes(160px, 140px);
        }
      }
      @keyframes cloudRight {
        0% {
          @include keyframes(100px, 500px);
        }
        20% {
          @include keyframes(120px, 460px, 1);
        }
        80% {
          @include keyframes(180px, 340px, 1);
        }
        100% {
          @include keyframes(200px, 300px);
        }
      }
    }
  }
  .desc {
    position: relative;
    float: left;
    width: 400px;
    padding: 30px 0;
    overflow: hidden;
    &_title {
      @include desc(32px, 700, 40px, #1482f0, 20px);
      @include animation(slideUp, 0.5s, ease, 0s, 1);
    }
    &_headline {
      @include desc(20px, 700, 24px, #222, 10px);
      @include animation(slideUp, 0.5s, ease, 0.1s, 1);
    }
    &_info {
      @include desc(13px, 400, 21px, grey, 30px);
      @include animation(slideUp, 0.5s, ease, 0.2s, 1);
      .desc_link {
        color: #20a0ff;
      }
    }
    &_back {
      display: block;
      float: left;
      width: 110px;
      height: 36px;
      background: #1482f0;
      border-radius: 100px;
      text-align: center;
      cursor: pointer;
      @include desc(14px, 400, 36px, #fff, 0px);
      @include animation(slideUp, 0.5s, ease, 0.3s, 1);
    }
    @keyframes slideUp {
      0% {
        transform: translateY(60px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
</style>
