<template>
  <view v-if="num > 1" class="box animate__animated animate__fadeOutUp">
    <img v-for="item in numArr" :key="item" :src="getNumImg(item)" class="num" />
    <img class="combo" :src="combo" />
  </view>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps<{
  num: any
}>()

const OSS_URL = import.meta.env.VITE_OSS_URL

const combo = `${OSS_URL}/xuexiaole_clinet/normalMode/combo.png`
const numArr = computed(() => props.num?.toString()?.split(''))

function getNumImg(item: string) {
  return `${OSS_URL}/xuexiaole_clinet/normalMode/${item}.png`
}
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.animate__fadeOutUp {
  animation: fadeOutUp;
}
.box {
  // width: 100%;
  // height: 100%;
  position: absolute;
  right: 80px;
  top: 12.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-delay: 0.5s;
  animation-duration: 2.5s;
  z-index: 100;

  & > img {
    flex-shrink: 0;
    object-fit: contain;
  }
  .num {
    width: 94px;
    height: 13.67vh;
    object-fit: contain;
    & + .num {
      margin-left: -10px;
    }
  }
  .combo {
    width: 160px;
    height: 8.67vh;
  }
}

@keyframes fadeOutUp {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}
</style>
