MOTHER'S DAY 2024

function getVisiblePlatform() { var platformElements = document.querySelectorAll('[data-platform]'); var visiblePlatform = null; for (var i = 0; i section * { margin: 0; padding: 0; } [data-platform] area { cursor: pointer; display: inline; } [data-platform] .comp-content { position: relative; margin: 0 auto; } [data-platform] .comp-content-image { position: relative; overflow: hidden; text-align: center; } [data-platform] .comp-content-image img { display: inline-block; max-width: 100%; vertical-align: bottom;height: auto; margin: 0; border: 0; -webkit-user-drag: none; } [data-platform] .comp-content-text { background-repeat: no-repeat; max-width: 1200px; } [data-platform] .text-box { display: block; } [data-platform] .comp-content-video { max-width: 100%; margin: 0 auto; vertical-align: bottom; } [data-platform] > iframe { width: 100%; aspect-ratio: 16 / 9; } [data-platform] .comp-content-video > video { max-width: 100%; margin: 0 auto; display: block; } [data-platform] .comp-content-video > iframe { width: 100%; aspect-ratio: 16 / 9; } [data-platform].platform-pc { margin: 0 auto; } .template-collection[data-factory="pc"] .articleLookbook-title , .template-collection[data-factory="m"] .articleLookbook-title { display: none !important; } .comp-content .comp-nav { display: flex; justify-content: center; } .comp-content .comp-nav li { list-style: none; min-height: 20px; padding: 0 16px; display: flex; align-items: center; cursor: pointer; text-align: center; justify-content: center; } .comp-content-swiper .slick-dots li button { border-color:#fff; background: #fff; } .comp-content-swiper .slick-dots li.slick-active button, .comp-content-swiper .slider-dots li.active button { background: none; } .floor-menu{ position: relative; display: flex; width: 100%;} .floor-menu.fixed{ position: fixed; top: 0; left: 0; z-index: 9; } .floor-menu .floor-menu-list { width: 100%; height: 100%; max-width: 1440px; margin: 0 auto; overflow-y: hidden; overflow-x: auto; } .floor-menu .floor-menu-inner{ position: relative; display: flex; padding: 0 8px; height: 100%; white-space: nowrap; justify-content: center; align-items: center; } .floor-menu .floor-item{ display: flex; align-items: center; padding: 0 16px; font-size: 14px; height: 70px;text-decoration: none; justify-content: center;} .scroll-down .floor-menu.fixed { top: 0 !important; } @media screen and (max-width: 768px) { [data-platform].platform-pc { display: none; } .floor-menu .floor-menu-list{ width: 90%; } .floor-menu .floor-menu-inner{ justify-content: flex-start; } .floor-menu .floor-item { width: auto !important; } } @media screen and (min-width: 769px) { [data-platform].platform-m { display: none; } } document.querySelectorAll('.comp-content-tabs .comp-nav li').forEach((modeButton, index) => { modeButton.addEventListener('click', function(e) { var parent = e.target.parentNode; var style = parent.getAttribute('data-style'); var styleActive = parent.getAttribute('data-active-style'); parent.querySelectorAll('li').forEach((elm, i) => { elm.setAttribute('style', style); if (i == index) { elm.setAttribute('style', styleActive); } }); var blockElm = parent.parentNode.querySelectorAll('.imgtabs-product-block'); if (blockElm.length) { blockElm.forEach((item, i) => { item.style.display = 'none'; if (index == i) { item.style.display = 'block'; } }) } }); }); var platform = getVisiblePlatform(); if (true && document.querySelector('.template-collection')) { if (platform === 'pc') { if (true) { document.querySelector('.template-collection').setAttribute('data-factory', 'pc') } } else { if (true) { document.querySelector('.template-collection').setAttribute('data-factory', 'm') } } }; var platformTemp = { init: function() { this.initFloorMenu(); }, initFloorMenu: function() { var floorMenu = document.querySelector('.platform-m .floor-menu'); if (window.innerWidth > 768) { floorMenu = document.querySelector('.platform-pc .floor-menu'); } if (!floorMenu) return; var floorMenuTop = floorMenu.offsetTop; console.log(floorMenuTop, 777); var floorItems = document.querySelectorAll('[data-floor-id]'); var menuItems = floorMenu.querySelectorAll('.floor-item'); var floorStyle = floorMenu.querySelector('.floor-menu-inner').getAttribute('data-style'); var floorStyleActive = floorMenu.querySelector('.floor-menu-inner').getAttribute('data-active-style'); function throttle(fn, wait) { var lastTime = 0; return function() { var now = new Date(); if (now - lastTime > wait) { fn.apply(this, arguments); lastTime = now; } }; } var click = false; function handleScroll() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > floorMenuTop) { var height = 0; if (window.innerWidth > 1024) { if (document.querySelector('#commonHeader')) { height = document.querySelector('#commonHeader').offsetHeight; } if (document.querySelector('.header-wrapper')) { height = document.querySelector('.header-wrapper').offsetHeight; } } else { if (document.querySelector('.hd-main')) { height = document.querySelector('.hd-main').offsetHeight; } if (document.querySelector('.header-wrapper')) { height = document.querySelector('.header-wrapper').offsetHeight; } } floorMenu.style.top = height + 'px'; floorMenu.classList.add('fixed'); } else { floorMenu.style.top = '0px'; floorMenu.classList.remove('fixed'); } if (click) return; floorItems.forEach((ele) => { var floorTop = ele.offsetTop; var floorBottom = floorTop + ele.offsetHeight; var floorId = ele.getAttribute('data-floor-id'); if (scrollTop > floorTop && scrollTop { if (item.getAttribute('data-value') === floorId) { item.style = floorStyleActive; } else { item.style = floorStyle; } }) } }) } window.addEventListener('scroll', throttle(handleScroll, 100)); function scrollToPosition(y, callback) { window.requestAnimationFrame(function() { window.scrollTo({ top: y, left: 0, behavior: 'smooth' }); if (callback && typeof callback === 'function') { callback(); } }); } var timer = null; floorMenu.querySelectorAll('.floor-item').forEach(Element => { Element.addEventListener('click', (e) => { floorMenu.querySelectorAll('.floor-item').forEach(item => { item.style = floorStyle; }); var value = e.target.getAttribute('data-value'); e.target.style = floorStyleActive; if (value) { var topValue = document.querySelector('[data-floor-id=' + value + ']').offsetTop; var H = floorMenu.offsetHeight; var height = 0; if (window.innerWidth > 1024) { if (document.querySelector('#commonHeader')) { height = document.querySelector('#commonHeader').offsetHeight; } if (document.querySelector('.header-wrapper')) { height = document.querySelector('.header-wrapper').offsetHeight; } } else { if (document.querySelector('.hd-main')) { height = document.querySelector('.hd-main').offsetHeight; } if (document.querySelector('.header-wrapper')) { height = document.querySelector('.header-wrapper').offsetHeight; } } click = true; clearTimeout(timer); scrollToPosition(topValue - H - height, function() { timer = setTimeout(function() { click = false; }, 2000); }); } }) }) } }; platformTemp.init(); window.addEventListener("resize", () => { platformTemp.init(); });