Мобильная версия-20%
.product-row { поле: 0 пикселей 0 пикселей 0 пикселей 0 пикселей; } .product-box { дисплей: гибкий; гибкое направление: столбец; ширина: 300 пикселей; отступ: 15 пикселей; поле: 0 пикселей 26 пикселей; положение: относительное; переполнение: скрыто; } .p-img-контейнер { ширина: 100%; высота: 100%; дисплей: гибкий; переполнение: скрыто; } .p-img а, .p-img { ширина: 100%; высота: 100%; дисплей: гибкий; } .p-img a img{ ширина: 100%; высота: 100%; позиция объекта: центр; соответствие объекта: содержать; } .label-продажа { позиция: абсолютная; верх: 10 пикселей; справа: -30 пикселей; размер шрифта: 12 пикселей; вес шрифта: 500; межбуквенный интервал: 1 пиксель; отступы: 5 пикселей 12 пикселей; преобразование: поворот (45 градусов); ширина: 110 пикселей; } .product-box .product-icon { позиция: абсолютная; дисплей: гибкий; гибкое направление: строка; оправдание-содержание: центр; выровнять-элементы: по центру; стиль списка: нет; верх: 220 пикселей; слева: 5 пикселей; видимость: скрыта; непрозрачность: 0; трансформировать: транслироватьY(40%); переход: непрозрачность 0,5 с, преобразование 0,5 с; } .product-box:hover .product-icon { видимость: видимая; непрозрачность: 1; трансформировать: транслироватьY(0); } .product-box: наведите курсор на .product-icon, .product-box:not(:hover) .product-icon { задержка перехода: 0,1 с; } .product-icon ли а { отступ слева: 50 пикселей; ширина: 46 пикселей; высота: 46 пикселей; box-shadow: 0 15px 25px #00000014; радиус границы: 50%; поле слева: 10 пикселей; поле справа: 10 пикселей; дисплей: блок; поле внизу: 13 пикселей; переход: .3с; цвет: #000; фон: #fff; } .product-icon li a:hover { белый цвет; фон: #51adcd; } .product-icon .icon-1{ позиция: абсолютная; верх: 16 пикселей; слева: 68 пикселей; } .product-icon .icon-2{ позиция: абсолютная; верх: 16 пикселей; слева: 138 пикселей; } .product-icon .icon-3{ позиция: абсолютная; верх: 16 пикселей; слева: 208 пикселей; } .product-title а { черный цвет; размер шрифта: 16 пикселей; шрифт-вес: наследовать; текстовое оформление: нет; } .product-title a:hover { цвет: #51adcd; } .product-price s { цвет: серый; вес шрифта: 700; размер шрифта: 15 пикселей; } .продукт-ценовой диапазон { цвет: #51adcd; вес шрифта: 700; размер шрифта: 15 пикселей; }
Я хотел, чтобы значок продукта перемещался вместе с полем продукта при реагировании, но это не так. Я уже пытался сделать положение коробки с продуктом относительным, но оно не перемещается вместе с ним, но моя продажа этикетки перемещается, но не значок изображения, вот несколько изображений того, что мне нужно исправить
