<template>
  <div class="body">
    <div class="canvasBox">
      <div class="spinnerSexBox p1"></div>
      <div class="spinnerSexBox p2"></div>
      <div class="spinnerSexBox p3"></div>
      <div class="spinnerSexBox p4"></div>
      <div class="p5 iconBox">
        <img class="icon" src="@/assets/icons/MachineryLoading.svg" />
      </div>
    </div>
    <div class="textInfo">正在操作载具请稍后...</div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 400px;
}
.icon {
  height: 140px !important;
  width: 140px !important;
}
.iconBox {
  padding: 0px;
}
.textInfo {
  text-align: center;
  font-size: $f24;
}
.canvasBox {
  @include flex;
  width: 100%;
  height: 100%;

  .spinnerSexBox {
    background: #1296db;
    border-radius: 50%;
    height: 10px;
    margin: 10px;
    width: 10px;
  }

  .p1 {
    animation: fall 1.5s linear 0.375s infinite;
  }

  .p2 {
    animation: fall 1.5s linear 0.25s infinite;
  }

  .p3 {
    animation: fall 1.5s linear 0.125s infinite;
  }

  .p4 {
    animation: fall 1.5s linear infinite;
  }
  @keyframes fall {
    0% {
      transform: translateY(0px);
    }
    25% {
      transform: translateY(25px);
    }
    75% {
      transform: translateY(25px);
    }
    100% {
      transform: translateY(0px);
    }
  }
}
</style>
