<template>
  <div class="audio-wave">
    <span v-for="item in 5" :key="item"></span>
  </div>
</template>

<script>
export default {
  name: 'AudioWave'
}
</script>

<style lang="less" scoped>
// 块个数
@blockNum: 5;
// 块颜色
@colorOne: #9b59b6;
@colorTwo: #409eff;
// 块宽度
/* prettier-ignore */
@blockWidth: 9PX;
// 块高度
/* prettier-ignore */
@blockHeight: 5PX;
/* prettier-ignore */
@blockActiveHeight: 30PX;
// 块间距
/* prettier-ignore */
@blockSpacing: 2PX;
@parentWidth: (@blockWidth + @blockSpacing) * @blockNum - @blockSpacing;
// @start 开始元素
// @end 结束元素
// @index 索引标记
.audio-wave-child(@start:0, @end: 0, @index: 0 ) when (@start =< @end) {
  &:nth-child(@{start}) {
    animation: audio_wave 1.5s infinite ease-in-out;
    animation-delay: 0.2s * @index;
  }
  .audio-wave-child((@start + 1), @end, @index: @index + 1);
}

@keyframes audio_wave {
  0% {
    height: @blockHeight;
    background: @colorOne;
  }
  25% {
    height: @blockActiveHeight;
    background: @colorTwo;
  }
  50% {
    height: @blockHeight;
    background: @colorOne;
  }
  100% {
    height: @blockHeight;
    background: @colorOne;
  }
}
.audio-wave {
  width: @parentWidth;
  height: @blockActiveHeight;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    display: block;
    width: @blockWidth;
    height: @blockHeight;
    background: @colorOne;
    .audio-wave-child(1, @blockNum);
  }
}
</style>
