Компонент ScaleBackground для масштабирования фонового изображения при прокрутке

<template>
  <div class="details-page">
    <!-- Фон -->
    <ScaleBackground class="nav-bar-image" />

    <div>Это область содержимого</div>
  </div>
</template>

<script setup>
  import ScaleBackground from '@/components/scale-background'
</script>

<style scoped>
  .details-page {
    box-sizing: border-box;
    padding-bottom: 100px;
  }
  .nav-bar-image {
    width: 100%;
    background-image: url('@/static/sea.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 380rpx;
    box-sizing: border-box;
    background-color: #018ac7;
  }
</style>