-
- ${plan.features.map((feature) => {
- const iconUrl = feature.icon.data
- ? getMediaUrl(feature.icon)
- : "../img/ad/checked.svg";
- return `
+ ${plan.features
+ .map((feature) => {
+ const iconUrl = feature.icon.data
+ ? getMediaUrl(feature.icon)
+ : "../img/ad/checked.svg";
+ return `
-
- + ${feature.text}
`;
- }).join("")}
+ })
+ .join("")}
@@ -620,63 +640,73 @@ function manageAnimate() {
window.addEventListener("scroll", () => {
throttle(() => {
- console.log("scroll")
- detectAdPlanEl()
- detectAdIntroEl()
- }, 200)
+ detectAdPlanEl();
+ detectAdIntroEl();
+ }, 200);
});
}
-const couldAdPlanElAnimate = {}
-const couldAdIntroElAnimate = {}
+const couldAdPlanElAnimate = {};
+const couldAdIntroElAnimate = {};
function detectAdPlanEl() {
- const adPlanEl = document.querySelector(".ad-plan")
+ const adPlanEl = document.querySelector(".ad-plan");
if (isElementOutOfViewport(adPlanEl)) {
- const els = document.querySelectorAll(".plan-item")
+ const els = document.querySelectorAll(".plan-item");
for (const el of els) {
- couldAdPlanElAnimate[`${el.id}`] = true
+ couldAdPlanElAnimate[`${el.id}`] = true;
}
- return
+ return;
}
- const _couldAdPlanElAnimate = Object.values(couldAdPlanElAnimate).every(Boolean)
+ const _couldAdPlanElAnimate =
+ Object.values(couldAdPlanElAnimate).every(Boolean);
if (!_couldAdPlanElAnimate) return;
if (isElementPartiallyInViewport(adPlanEl)) {
- const els = document.querySelectorAll(".plan-item")
+ const els = document.querySelectorAll(".plan-item");
for (const el of els) {
- el.classList.add("animate__flipInX")
- couldAdPlanElAnimate[`${el.id}`] = false
- el.addEventListener("animationend", () => {
- el.classList.remove("animate__flipInX")
- }, { once: true })
+ el.classList.add("animate__flipInX");
+ couldAdPlanElAnimate[`${el.id}`] = false;
+ el.addEventListener(
+ "animationend",
+ () => {
+ el.classList.remove("animate__flipInX");
+ },
+ { once: true }
+ );
}
- return
+ return;
}
}
function detectAdIntroEl() {
- const adIntroEl = document.querySelector(".ad-intro")
+ const adIntroEl = document.querySelector(".ad-intro");
if (isElementOutOfViewport(adIntroEl)) {
- const els = document.querySelectorAll(".ad-intro-item")
+ const els = document.querySelectorAll(".ad-intro-item");
for (const el of els) {
- couldAdIntroElAnimate[`${el.id}`] = true
+ couldAdIntroElAnimate[`${el.id}`] = true;
}
- return
+ return;
}
- const _couldAdIntroElAnimate = Object.values(couldAdIntroElAnimate).every(Boolean)
+ const _couldAdIntroElAnimate = Object.values(couldAdIntroElAnimate).every(
+ Boolean
+ );
if (!_couldAdIntroElAnimate) return;
if (isElementPartiallyInViewport(adIntroEl)) {
- const els = document.querySelectorAll(".ad-intro-item")
+ const els = document.querySelectorAll(".ad-intro-item");
for (const el of els) {
- el.classList.add("animate__zoomIn")
- couldAdIntroElAnimate[`${el.id}`] = false
- el.addEventListener("animationend", () => {
- el.classList.remove("animate__zoomIn")
- }, { once: true })
+ el.classList.add("animate__zoomIn");
+ couldAdIntroElAnimate[`${el.id}`] = false;
+ el.addEventListener(
+ "animationend",
+ () => {
+ el.classList.remove("animate__zoomIn");
+ },
+ { once: true }
+ );
}
- return
+ return;
}
}
@@ -684,9 +714,11 @@ function isElementPartiallyInViewport(el) {
if (!el) return false;
const rect = el.getBoundingClientRect();
return (
- rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
+ rect.top <
+ (window.innerHeight || document.documentElement.clientHeight) &&
rect.bottom > 0 &&
- rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+ rect.left <
+ (window.innerWidth || document.documentElement.clientWidth) &&
rect.right > 0
);
}
@@ -696,8 +728,80 @@ function isElementOutOfViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.bottom < 0 ||
- rect.top > (window.innerHeight || document.documentElement.clientHeight) ||
+ rect.top >
+ (window.innerHeight || document.documentElement.clientHeight) ||
rect.right < 0 ||
rect.left > (window.innerWidth || document.documentElement.clientWidth)
);
+}
+
+function handleDialog() {
+ const dialogEl = document.querySelector(".ad-dialog");
+ if (!dialogEl) return;
+
+ lockBodyScroll(dialogEl.classList.contains("show"));
+ overridePlanButton();
+
+ const dialogBackdropEl = dialogEl.querySelector(".ad-dialog-backdrop");
+ if (dialogBackdropEl) {
+ dialogBackdropEl.addEventListener("click", () => {
+ dialogEl.classList.remove("show");
+ lockBodyScroll(false);
+ handleDialogAnimate(false)
+ });
+ }
+
+ const dialogFooterBtnEl = dialogEl.querySelector(".ad-dialog-footer-btn");
+ if (dialogFooterBtnEl) {
+ dialogFooterBtnEl.addEventListener("click", () => {
+ dialogEl.classList.remove("show");
+ lockBodyScroll(false);
+ handleDialogAnimate(false)
+ });
+ }
+}
+
+function lockBodyScroll(bool) {
+ document.body.style.overflowY = bool ? "hidden" : "auto";
+}
+
+function overridePlanButton() {
+ function showDialog(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const dialogEl = document.querySelector(".ad-dialog");
+ if (!dialogEl) return;
+ dialogEl.classList.add("show");
+ lockBodyScroll(true);
+ handleDialogAnimate(true)
+ }
+
+ const planButtonEl = document.querySelectorAll(".plan-item-button");
+ planButtonEl.forEach((el) => {
+ el.removeEventListener("click", showDialog);
+
+ const aEl = el.querySelector("a");
+ if (!aEl.href || aEl.href.includes("#")) {
+ aEl.removeAttribute("href");
+ el.addEventListener("click", showDialog);
+ }
+ });
+}
+
+function handleDialogAnimate(bool) {
+ const dialogEl = document.querySelector(".ad-dialog");
+ if (!dialogEl) return;
+
+ const dialogWrapperEl = dialogEl.querySelector(".ad-dialog-wrapper");
+ if (!dialogWrapperEl) return;
+
+ if (bool) {
+ dialogWrapperEl.classList.add("animate__animated", "animate__bounceIn", "animate__faster");
+ dialogWrapperEl.addEventListener("animationend", () => {
+ dialogWrapperEl.classList.remove("animate__animated", "animate__bounceIn", "animate__faster")
+ })
+ } else {
+ dialogWrapperEl.classList.remove("animate__animated", "animate__bounceIn", "animate__faster")
+ }
}
\ No newline at end of file
diff --git a/public/site/zh/ad.html b/public/site/zh/ad.html
index 6fd0b0ec7..2fddc1c54 100644
--- a/public/site/zh/ad.html
+++ b/public/site/zh/ad.html
@@ -25,6 +25,22 @@
+
+
+
+
+
+
+
+
+
+
+ 如需购买请扫码添加微信客服专员
+
+
+