Блог

Мне нужно расположить число «01/04», как на этом изображении

Пока я получил это

Структура кода в vue js пока такая:

 <img id="theZoomImage" sizes="100vw" :srcset="imageSources(images[current])" :src="imageSource(images[current])" />
<div class="product-images-popup-bar">
    <div class="product-images-popup-number">
        <span class="product-images-popup-child_num">0{{current 1}}</span>
        <span class="product-images-popup-parent_num">0{{totalImageNum()}}</span>
    </div>
    <div class="product-images-popup-pagination">pagination</div>
</div>
  

css пока:

 .product-images-popup-bar {
    position: absolute;
    left: 5vw;
}

.product-images-popup-number {
    display: flex;
    align-items: flex-start;
}

.product-images-popup-child_num {
    line-height: 1;
    color: #191919;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;

    font-size: 30px;
    font-size: 7vw;
}

.product-images-popup-parent_num {
    line-height: 1;
    color: #191919;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;

    font-size: 15px;
    font-size: 4vw;
    padding: 1px 0 0 4px;
}

.product-images-popup-parent_num:before {
    content: '/';
    padding-right: 5px;
}

.product-images-popup-pagination {

}
  

Цель — немного увеличить нумерацию нумерацию страниц на разных устройствах.

Я думаю получить координату «изображения продукта-всплывающая панель», затем вычесть некоторые значения, а затем расположить ее. Не уверен, как получить координату.

Просто переместите элементы, которые вы хотите, немного вверх на позицию relative , а затем top уменьшите требуемую сумму

например

 .product-images-popup-number {
    display: flex;
    align-items: flex-start;
    position: relative;
    top: -5px;
} 
  

и затем, очевидно, используйте медиа-запросы, чтобы настроить его по своему усмотрению