You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
4.8 KiB
142 lines
4.8 KiB
//#region \0vite/modulepreload-polyfill.js
|
|
(function polyfill() {
|
|
const relList = document.createElement("link").relList;
|
|
if (relList && relList.supports && relList.supports("modulepreload")) return;
|
|
for (const link of document.querySelectorAll("link[rel=\"modulepreload\"]")) processPreload(link);
|
|
new MutationObserver((mutations) => {
|
|
for (const mutation of mutations) {
|
|
if (mutation.type !== "childList") continue;
|
|
for (const node of mutation.addedNodes) if (node.tagName === "LINK" && node.rel === "modulepreload") processPreload(node);
|
|
}
|
|
}).observe(document, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
function getFetchOpts(link) {
|
|
const fetchOpts = {};
|
|
if (link.integrity) fetchOpts.integrity = link.integrity;
|
|
if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
|
|
if (link.crossOrigin === "use-credentials") fetchOpts.credentials = "include";
|
|
else if (link.crossOrigin === "anonymous") fetchOpts.credentials = "omit";
|
|
else fetchOpts.credentials = "same-origin";
|
|
return fetchOpts;
|
|
}
|
|
function processPreload(link) {
|
|
if (link.ep) return;
|
|
link.ep = true;
|
|
const fetchOpts = getFetchOpts(link);
|
|
fetch(link.href, fetchOpts);
|
|
}
|
|
})();
|
|
//#endregion
|
|
//#region js/common.js
|
|
$(function() {
|
|
AOS.init({ duration: 800 });
|
|
const lenis = new Lenis();
|
|
window.lenis = lenis;
|
|
gsap.registerPlugin(ScrollTrigger, Observer);
|
|
lenis.on("scroll", ScrollTrigger.update);
|
|
gsap.ticker.add((time) => {
|
|
lenis.raf(time * 1e3);
|
|
});
|
|
gsap.ticker.lagSmoothing(0);
|
|
const $header = $(".site-header");
|
|
const $mask = $(".mask");
|
|
const $targets = $("[data-header-dark]");
|
|
const updateHeader = () => {
|
|
if (!$header.length) return;
|
|
const headerRect = $header[0].getBoundingClientRect();
|
|
let shouldDark = false;
|
|
const probeX = Math.max(0, Math.min(window.innerWidth - 1, window.innerWidth / 2));
|
|
const probeY = Math.max(0, Math.min(window.innerHeight - 1, headerRect.bottom + 2));
|
|
if (document.elementFromPoint(probeX, probeY)?.closest("[data-header-dark]")) shouldDark = true;
|
|
else $targets.each(function() {
|
|
const rect = this.getBoundingClientRect();
|
|
if (rect.top <= headerRect.bottom && rect.bottom > headerRect.top) {
|
|
shouldDark = true;
|
|
return false;
|
|
}
|
|
});
|
|
$header.toggleClass("dark", shouldDark || $header.hasClass("is-mega-open"));
|
|
const isScrolled = window.scrollY > 50;
|
|
$header.toggleClass("is-scrolled", isScrolled);
|
|
$mask.toggleClass("is-scrolled", isScrolled);
|
|
};
|
|
lenis.on("scroll", updateHeader);
|
|
ScrollTrigger.addEventListener("refresh", updateHeader);
|
|
updateHeader();
|
|
const maskEl = document.querySelector(".mask");
|
|
const maskContentEl = document.querySelector(".mask-content");
|
|
function setMaskOpenUi(isOpen) {
|
|
$("body").toggleClass("is-mask-open", isOpen);
|
|
}
|
|
$(".site-header__extra-btn.toggle").on("click", function() {
|
|
if (!maskEl || !maskContentEl) return;
|
|
const nodes = maskContentEl.querySelectorAll(".mask-nav__link");
|
|
$(maskEl).addClass("show mask--nav-motion");
|
|
$("body").css("overflow", "hidden");
|
|
setMaskOpenUi(true);
|
|
gsap.killTweensOf(nodes);
|
|
gsap.from(nodes, {
|
|
opacity: 0,
|
|
y: 10,
|
|
stagger: .04,
|
|
delay: .2,
|
|
overwrite: "auto",
|
|
onComplete: function() {
|
|
maskEl.classList.remove("mask--nav-motion");
|
|
gsap.set(nodes, { clearProps: "all" });
|
|
}
|
|
});
|
|
});
|
|
$(".mask-header__icon-btn--close").on("click", function() {
|
|
if (!maskEl || !maskContentEl) return;
|
|
gsap.killTweensOf(maskContentEl.querySelectorAll("ul li a"));
|
|
$(maskEl).removeClass("show mask--nav-motion");
|
|
$("body").css("overflow", "auto");
|
|
setMaskOpenUi(false);
|
|
});
|
|
$(".mask-nav__toggle").on("click", function() {
|
|
const $item = $(this).closest(".mask-nav__item--expandable");
|
|
const isExpanded = $item.attr("data-expanded") === "true";
|
|
$item.attr("data-expanded", !isExpanded);
|
|
$(this).attr("aria-expanded", !isExpanded);
|
|
});
|
|
$(".section-contact-form").on("submit", function(e) {
|
|
e.preventDefault();
|
|
const $form = $(this);
|
|
const $name = $form.find("[name=\"name\"]");
|
|
const $phone = $form.find("[name=\"phone\"]");
|
|
const name = $.trim($name.val());
|
|
const phone = $.trim($phone.val());
|
|
const agreed = $form.find("[name=\"agree\"]").is(":checked");
|
|
if (!name) {
|
|
alert("请输入姓名");
|
|
$name.focus();
|
|
return;
|
|
}
|
|
if (!phone) {
|
|
alert("请输入联系方式");
|
|
$phone.focus();
|
|
return;
|
|
}
|
|
if (!agreed) {
|
|
alert("请阅读并同意隐私政策");
|
|
return;
|
|
}
|
|
alert("提交成功,我们将尽快与您联系");
|
|
$form[0].reset();
|
|
});
|
|
$("#nav-mega-product").on("mouseenter", "[data-mega-cat]", function() {
|
|
const $mega = $("#nav-mega-product");
|
|
const cat = $(this).attr("data-mega-cat");
|
|
$mega.find("[data-mega-cat]").removeClass("is-active");
|
|
$(this).addClass("is-active");
|
|
$mega.find("[data-mega-panel]").each(function() {
|
|
const match = this.dataset.megaPanel === cat;
|
|
this.hidden = !match;
|
|
this.classList.toggle("is-active", match);
|
|
});
|
|
});
|
|
});
|
|
//#endregion
|