<скрипт>
window.addEventListener('elementor/frontend/init', () => {
jQuery(документ).ready(функция($){
var cabSwiper = новый Swiper('.design-cabin', {
слайдыPerView: 4,
слайдыPerColumn: 2,
пространствомежду: 0,
навигация: {
nextEl: '.design-box-cabin .design_next',
prevEl: '.design-box-cabin .design_prev',
},
точки останова: {
240: {
слайдыPerView: 1,
},
320: {
слайдыPerView: 2,
},
// когда ширина окна <= 480 пикселей
600: {
слайдыPerView: 3,
},
// когда ширина окна <= 640 пикселей
1024: {
слайдыPerView: 4,
}
},
});
var PanelSwiper = новый Swiper('.design-panel', {
слайдыPerView: 4,
слайдыPerColumn: 2,
пространствомежду: 0,
навигация: {
nextEl: '.design-box-panel .design_next',
prevEl: '.design-box-panel .design_prev',
},
точки останова: {
240: {
слайдыPerView: 1,
},
320: {
слайдыPerView: 2,
},
// когда ширина окна <= 480 пикселей
600: {
слайдыPerView: 3,
},
// когда ширина окна <= 640 пикселей
1024: {
слайдыPerView: 4,
}
},
});
var FloorSwiper = новый Swiper('.design-floor', {
слайдыPerView: 4,
слайдыPerColumn: 2,
пространствомежду: 0,
навигация: {
nextEl: '.design-box-floor .design_next',
prevEl: '.design-box-floor .design_prev',
},
точки останова: {
240: {
слайдыPerView: 1,
},
320: {
слайдыPerView: 2,
},
// когда ширина окна <= 480 пикселей
600: {
слайдыPerView: 3,
},
// когда ширина окна <= 640 пикселей
1024: {
слайдыPerView: 4,
}
},
});
пусть код = `
`;
$('тело').append(код);
$('#DESIGN_POPUP .close_hover_box').click(function() {
$('#DESIGN_POPUP').hide();
});
$('.design_box').click(function() {
пусть postId = $(this).data('id'),
imageUrl = $(this).find('.f_image')[0].src;
// Использование jQuery в формате GET для определения параметров «design»
$.ajax({
url: '/wp-json/wp/v2/design/' + postId, // URL-адрес URL-адреса WordPress и "design" ID
метод: «ПОЛУЧИТЬ»,
успех: функция (ответ) {
console.log(ответ)
// 获取自定义字段的值
$('#DESIGN_POPUP .design_title').html(response.title.rendered);
$('#DESIGN_POPUP .design_short_title').html(response.acf.description);
$('#DESIGN_POPUP .design_description').html(response.acf.table);
$("#DESIGN_IMAGE").attr("src", imageUrl);
$('#DESIGN_POPUP').show();
},
ошибка: функция (ошибка) {
// 处理错误情况
console.log('Ошибка:', ошибка);
}
});
});
})
})
<стиль>
.swiper-слайд {
высота: авто;
}
#DESIGN_POPUP {
положение: фиксированное;
верх: 0;
слева: 0;
ширина: 100vw;
высота: 100вх;
z-индекс: 99999999;
фон: rgba(0,0,0,0.4);
дисплей: нет;
}
.design_popup_box {
максимальная ширина: 1400 пикселей;
ширина: 80%;
осталось: 50%;
верх: 50%;
трансформировать: транслировать(-50%, -50%);
позиция: абсолютная;
дисплей: гибкий;
выровнять-элементы: по центру;
оправдание-содержание: пространство между;
отступ: 4рем;
фон: #fff;
}
.close_hover_box {
позиция: абсолютная;
цвет: #fff;
правильно: 0;
верх: 0;
фон: var( --e-global-color-вторичный );
заполнение: 0,4рем 1рем;
курсор: указатель;
выбор пользователя: нет;
}
.design_popup_box .design_content {
ширина: 75%;
}
.design_popup_box .design_image {
ширина: 25%;
заполнение: 0 5%;
}
.design_popup_box .design_image img {
ширина: 100%;
}
.design_short_title {
вес шрифта: 400;
цвет: var( --e-global-color-вторичный );
размер шрифта: 1,5рем;
поле-дно: 3rem;
}
.design_title {
размер шрифта: 2,25рем;
поле-дно: 2rem;
}
.design_description {
размер шрифта: 1.125rem;
вес шрифта: 300;
}
.design_btn > div {
позиция: абсолютная;
слева: 0;
верх: 50%;
трансформировать: транслировать(-120%, -50%);
ширина: 3рем;
курсор: указатель;
}
.design_btn > div.disable {
курсор: по умолчанию;
}
.design_btn > div SVG {
заливка: #d5d5d5;
ширина: 100%;
}
.design_btn > div:hover svg {
цвет: var( --e-global-color-вторичный );
}
.design_btn > div.design_next {
слева: не установлено;
правильно: 0;
трансформировать: транслировать(120%, -50%);
}
.дизайн-кабина,
.design-панель,
.design-floor {
граница-верх: 1 пиксель сплошной #dcdcdc;
левая граница: 1 пиксель сплошной #dcdcdc;
положение: относительное;
}
.design_box {
отступ: 2рем;
правая граница: 1 пиксель сплошной #dcdcdc;
нижняя граница: 1 пиксель сплошной #dcdcdc;
положение: относительное;
выравнивание текста: по центру;
курсор: указатель;
высота: 100%;
}
.design_box .cover_box {
позиция: абсолютная;
слева: 0;
верх: 0;
высота: 100%;
ширина: 100%;
непрозрачность: 0;
видимость: скрыта;
переход: все .4с;
фон: rgba(0,0,0,0.4);
цвет: #fff;
дисплей: гибкий;
выровнять-элементы: по центру;
оправдание-содержание: центр;
гибкое направление: столбец;
}
.design_box .cover_box img {
ширина: 3,5рем;
маржа-верх: 4rem;
}
.design_box h3 {
вес шрифта: 300;
размер шрифта: 1,5рем;
маржа: 1рем;
}
.design_box:hover .cover_box {
видимость: видимая;
непрозрачность: 1;
}
.design_box:hover .design_content {
непрозрачность: 0;
видимость: скрыта;
}
.design_popup_box тд {
заполнение: 1рем 0;
нижняя граница: 1 пиксель сплошной #dcdcdc;
положение: относительное;
}
.design_popup_box tr > td:first-child {
заполнение: 1рем 2рем 1рем 0;
}
.design_popup_box tr > td:first-child:after {
позиция: абсолютная;
содержание: '';
ширина: 1рем;
высота: 1 пиксель;
внизу: -1px;
правильно: 0;
фон: #fff;
}
@media screen и (максимальная ширина: 767 пикселей) {
.design_btn > div {
трансформировать: транслировать(-80%, -50%);
}
.design_btn > div.design_next {
трансформировать: транслировать(80%, -50%);
}
.design_popup_box {
гибкое направление: столбец;
выровнять-элементы: начало;
}
.design_content {
ширина: 100%;
}
.design_popup_box .design_image {
ширина: 50%;
поле справа: 2rem;
}
}
