<template>
  <div :class="[{'levelIconTV':runVersion == 'normal'},{'levelIconOutDoor':runVersion != 'normal'},{'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: 90%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

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

.levelIconOutDoor {
  bottom: 0;
  left: 0;
  right: 0;
  // padding-top: 0.2rem;
  // padding-bottom: 0px;
}

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

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

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

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

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

/*响应式调整*/
@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
  .levelIcon {
    position: fixed;
  }
}
</style>
