flyLong/v2tv/src/components/levelIcon.vue

<template>
  <div :class="[{'levelIconTV':runVersion == 'test'},{'levelIconOutDoor':runVersion != 'test'},{'levelIcon':true}]">
    <ul>
      <li>
        <img src="../assets/imgs/levelIcon/i39.svg" alt="">
      </li>
      <li>
        <img src="../assets/imgs/levelIcon/i40.svg" alt="">
      </li>
      <li>
        <img src="../assets/imgs/levelIcon/i55.svg" alt="">
      </li>
      <li>
        <img src="../assets/imgs/levelIcon/i70.svg" alt="">
      </li>
      <li>
        <img src="../assets/imgs/levelIcon/i80.svg" alt="">
      </li>
      <li>
        <img src="../assets/imgs/levelIcon/i90.svg" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
import '../Global'

export default {
  data() {
    return {
      runVersion: runVersion
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin cube {
  width: 68%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.levelIcon {
  @include cube;
  height: 1rem;
}

.levelIconOutDoor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 5px;
}

.levelIconTV {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 5px;
}

.levelIcon ul {
  width: 92%;
  overflow: hidden;
  display: block;
  margin: 0;
  padding-left: 5%;

  li {
    width: 16.666666666667%;
    height: 2rem;
    overflow: hidden;
    float: left;
  }

  li:nth-child(1) {
    padding-left: 0;
  }

  img {
    @include cube;
    width: 70%;
  }
}

</style>