Сергей delphinpro

/**
 *  chapter - номер полоски, от 1 до 4
 *  val - текущее значение
 *  max - максимальное значение
 * Возвращает ширину полоски в процентах
 */
getWidth(chapter, val, max) {
  const CHAPTERS = 4;
  const p = 100 / CHAPTERS;
  let full = Math.ceil(w / p);
  let w = val * 100 / max;
  if (chapter <= full) return 100;
  if (chapter === full + 1) return (w % p) * 100 / p;
  return 0;
}

<div class="chapter-progress"
    :style="{width: getWidth(chapter, property.value, property.maxValue)+'%'}"
></div>

<audio id="music-player" src="/storage/files/music-1.mp3" loop></audio>
  <script>
    (function () {
      const player = document.getElementById('music-player');
      if (!player) return;
    
      const toggle = document.getElementById('toggle-music');
      if (screen.width < 1220) return;
      if (!toggle) return;
      let playing = false;
      let firstPlay = true;
      let iPos;

      const KEY_MP_PAUSED = 'music-player-paused';
      const KEY_MP_POSITION = 'music-player-position' + player.src;

      const startPosition = parseFloat(localStorage.getItem(KEY_MP_POSITION));
      const mpPaused = +localStorage.getItem(KEY_MP_PAUSED);

      function enablePlay() {
        if (firstPlay) {
          firstPlay = false;
          if (startPosition) player.currentTime = startPosition;
        }
        player.play();
        toggle.classList.add('music-on');
      }

      function userClick() {
        document.removeEventListener('click', userClick);
        enablePlay();
      }

      if (!mpPaused) document.addEventListener('click', userClick);

      function updateCurrentPosition() {
        localStorage.setItem(KEY_MP_POSITION, player.currentTime.toString());
      }

      player.addEventListener('play', e => {
        playing = true;
        localStorage.setItem(KEY_MP_PAUSED, '0');
        iPos = setInterval(updateCurrentPosition, 1000);
      });

      player.addEventListener('pause', e => {
        playing = false;
        localStorage.setItem(KEY_MP_PAUSED, '1');
        clearInterval(iPos);
      });

      toggle.addEventListener('click', e => {
        e.preventDefault();
        e.stopPropagation();
        document.removeEventListener('click', userClick);
        if (playing) {
          player.pause();
          toggle.classList.remove('music-on');
        } else {
          enablePlay();
        }
      });
    })();
  </script>

Тобеж мы правим не .scss а непонятно где разбросанные .css,

data(){
  return {
    classDir: '',
  }
}
onLeave(i, ni, dir){
  this.classDir = dir;
}
<div :class="{up: classDir}">