Мобильная версияФлажок
На изображении выше вы можете видеть фоновое поле с флажками Мой HTML-код:
{% расширяет 'partials/base.html'%} {%загрузка статики%} {% блокирует контент %} /* Базовое оформление */ HTML, тело { высота: 100%; ширина: 100%; маржа: 0; семейство шрифтов: «Робото», без засечек; } .контейнербокс { максимальная ширина: 1200 пикселей; маржа: 0 авто; отступ: 15 пикселей; дисплей: гибкий; } /* Столбцы */ .левая колонка { ширина: 65%; положение: относительное; } .правая колонка { ширина: 35%; поле сверху: 60 пикселей; } /* Левый столбец */ .левая колонка img { ширина: 70%; позиция: абсолютная; слева: 0; верх: 0; непрозрачность: 0; переход: все 0,3 секунды легкости; } .left-column img.active { непрозрачность: 1; } /* Правый столбец */ /* Описание продукта */ .Описание продукта { нижняя граница: сплошная 1 пиксель #E1E8EE; поле внизу: 20 пикселей; } .product-description интервал { размер шрифта: 12 пикселей; цвет: #358ED7; межбуквенный интервал: 1 пиксель; преобразование текста: верхний регистр; текстовое оформление: нет; } .product-description h1 { вес шрифта: 300; размер шрифта: 52px; цвет: #43484D; межбуквенный интервал: -2px; } .product-description p { размер шрифта: 16 пикселей; вес шрифта: 300; цвет: #86939E; высота строки: 24 пикселей; } /* Конфигурация продукта */ .продукт-цветовой диапазон, .cable-config интервал { размер шрифта: 14 пикселей; вес шрифта: 400; цвет: #86939E; поле внизу: 20 пикселей; отображение: встроенный блок; } /* Цвет продукта */ .product-color { поле внизу: 30 пикселей; } .color-выберите div { отображение: встроенный блок; } .color-choose input[type="radio"] { дисплей: нет; } .color-choose input[type="radio"] + диапазон меток { отображение: встроенный блок; ширина: 40 пикселей; высота: 40 пикселей; поле: -1px 4px 0 0; вертикальное выравнивание: по середине; курсор: указатель; радиус границы: 50%; } .color-choose input[type="radio"] + диапазон меток { граница: сплошная 2 пикселя #FFFFFF; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33); } .color-choose input[type="radio"]#red + диапазон меток { цвет фона: #C91524; } /*.color-choose input[type="radio"]#blue + диапазон меток { цвет фона: #314780; } .color-choose input[type="radio"]#black + диапазон меток { цвет фона: #323232; }*/ .color-choose input[type="radio"]:checked + диапазон меток { фоновое изображение: URL (изображения/check-icn.svg); фоновый повтор: без повтора; фоновая позиция: центр; } /* Конфигурация кабеля */ .size-выберите { поле внизу: 20 пикселей; } .size-кнопка выбора { граница: сплошная 2 пикселя #E1E8EE; радиус границы: 6 пикселей; отступ: 13 пикселей 20 пикселей; размер шрифта: 14 пикселей; цвет: #5E6977; цвет фона: #fff; курсор: указатель; переход: все 0,5 с; } .кнопка выбора размера: наведите курсор, Кнопка выбора размера: активна, Кнопка .size-choose: фокус { граница: 2 пикселя, сплошная #86939E; контур: нет; } .size-конфигурация { нижняя граница: сплошная 1 пиксель #E1E8EE; поле внизу: 20 пикселей; } .size-config а { цвет: #358ED7; текстовое оформление: нет; размер шрифта: 12 пикселей; положение: относительное; поле: 10 пикселей 0; отображение: встроенный блок; } .size-config a:before { содержание: "?"; высота: 15 пикселей; ширина: 15 пикселей; радиус границы: 50%; граница: 2 пикселя сплошной rgba(53, 142, 215, 0,5); отображение: встроенный блок; выравнивание текста: по центру; высота строки: 16 пикселей; непрозрачность: 0,5; поле справа: 5 пикселей; } /* Цена продукта */ /*.цена продукта { дисплей: гибкий; выровнять-элементы: по центру; } .продукт-цена интервала { размер шрифта: 26 пикселей; вес шрифта: 300; цвет: #43474D; поле справа: 20 пикселей; }*/ .cart-btn { отображение: встроенный блок; цвет фона: #FFB6C1; радиус границы: 6 пикселей; размер шрифта: 16 пикселей; цвет: #FFFFFF; текстовое оформление: нет; отступ: 12 пикселей 30 пикселей; переход: все 0,5 с; } .cart-btn:hover { цвет фона: #ff0000; } .buynow-btn { отображение: встроенный блок; цвет фона: #FFB6C1; радиус границы: 6 пикселей; размер шрифта: 16 пикселей; цвет: #ФФФФФФ; текстовое оформление: нет; отступ: 12 пикселей 30 пикселей; переход: все 0,5 с; } .buynow-btn:hover { цвет фона: #ff0000; } /* Адаптивный */ @media (максимальная ширина: 940 пикселей) { .контейнер { гибкое направление: столбец; поле сверху: 60 пикселей; } .левый столбец, .правая колонка { ширина: 100%; } .левая колонка img { ширина: 300 пикселей; правильно: 0; верх: -65 пикселей; слева: начальный; } } @media (максимальная ширина: 535 пикселей) { .левая колонка img { ширина: 220 пикселей; верх: -85 пикселей; } } .цена продукта { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; выравнивание текста: по центру; } .цена { размер шрифта: 24 пикселей; начертание шрифта: жирный; цвет: #333; /* Цвет цены */ поле внизу: 5 пикселей; } дель { цвет: #999; /* Цвет старой цены */ размер шрифта: 18 пикселей; } {% для p в p_image %}
{% конец для %}
{{p.vendor}} {{p.title}}
{{p.description}}
{% для c в цветах %} Цвет {% конец для %} {% для s в размерах %} Размеры {{s.name}} {% конец для %} Как настроить наушники
Новая цена: {{p.price}}
Старая цена: {{p.old_price}} Добавить в корзину Купить сейчас Сопутствующие товары {% для p в продуктах %}
Скидка на {{ p.get_percentage|floatformat:0 }}%
{{ p.category }} {{ p.title }}
{{ p.price }}
{{ p.old_price }} Добавить в корзину
{% конец для %} $(документ).ready(функция() { // Здесь ваш существующий код $('.color-choose').on('click', 'input', function() { var ProductColor = $(this).attr('data-image'); $('.active').removeClass('активный'); $('.left-column img[data-image = ' + productColor + ']').addClass('active'); $(this).addClass('активный'); }); }); {% контента в конце блока %}
Остальное работает отлично, но единственная проблема с фоновыми полями в флажках. Мои модели и соперники работают отлично, нет необходимости видеть коды Джанго. проблема только в html и css.**
Удалите фоновые поля, которые идут вместе с флажками.
