((window.BitterBrainsBanner = window.BitterBrainsBanner || {
host: "",
affiliateKey: "vuerouter",
emulateDate: void 0,
emulateHour: void 0,
date: "03/09/2025, 01:30 PM Central European Standard Time",
activePhase: {
id: "VS-FREEWEEKEND25_AFFILIATE_SUPERSALE_EXT8",
countdownEnds: "2025-03-09T22:59:59.000000Z",
cta: "获取官方授权",
ends: "2025-03-09T22:59:59.000000Z",
title: "新品首发,限时特惠,即刻抢购! ",
link: "https://www.rxthink.cn",
assets: null,
static: null,
classes: ["bb-campaign-vs-affiliates-freeweekend-urgent"],
prelude: "小蚂蚁云 · 企业级旗舰产品",
// addendum: "Extended for",
subtitle: "赋能开发者,驱动企业增长,提供一站式数据中台解决方案。",
couponCode: null,
isExtended: !1,
hideBanners: !1,
assetsFormat: "png",
showCountdown: 0,
countdownFooter: null,
showDaysAsHours: !0,
affiliates: [
"vuerouter",
"pinia",
"vueuse",
"vuejsforge",
"nuxtnation",
"vuejsdevelopers",
"VUEDEMY",
"vs_masteringpinia",
"vuejsnation",
"SENODEV",
"NSCRIPT",
],
interlude: null,
starts: "2025-03-08T22:59:59.000Z",
isRunning: !0,
remaining: 37757670,
closedKey: "VS-FREEWEEKEND25_AFFILIATE_SUPERSALE_EXT8_CLOSED",
countdownRemaining: 37757670,
overrides: { vuejs: { hideSeconds: !0 } },
logoMobile: "/banners/mark.svg",
logoTablet: "/banners/mark.svg",
logoDesktop: "/banners/logo.svg",
},
fromCache: !1,
cacheTtl: 0,
type: "top",
closeable: void 0,
isOpen: !1,
countdownInterval: null,
isInitiated: !1,
style: null,
allowList: {
masteringnuxt: (n) => "/" === n || "/nuxt2" === n || "/nuxt3" === n,
vueschool: (n) =>
"/" === n ||
n.startsWith("/courses") ||
n.startsWith("/articles") ||
n.startsWith("/lessons") ||
n.startsWith("/vueschool-demo"),
vueschool_free: (n) =>
"/" === n ||
n.startsWith("/courses") ||
n.startsWith("/articles") ||
n.startsWith("/lessons"),
vueschool_premium: (n) =>
"/" === n ||
n.startsWith("/courses") ||
n.startsWith("/articles") ||
n.startsWith("/lessons"),
vs_frontendnation: (n) => "/" === n,
},
render() {
const {
countdownFooter: n,
prelude: e,
interlude: t,
addendum: b,
title: a,
subtitle: i,
cta: o,
link: r,
classes: s,
showCountdown: l,
} = this.activePhase,
d = n ? `
` : "",
c = `\n \n \n \n \n
\n ${
e ? `
${e}
` : ""
}\n
\n
${a}
\n ${
i ? `
${i}
` : ""
}\n
\n ${
t ? `
${t}
` : ""
}\n
\n ${
o
? `
`
: ""
}\n
\n ${
b ? `
${b}
` : ""
}\n ${
l
? `
${this.renderCountdown()}
${d}
`
: ""
}\n
\n
\n \n `,
p = document.createElement("a");
p.setAttribute("id", "bb-banner");
const u = {
utm_source: this.affiliateKey,
utm_medium: "website",
utm_campaign: "affiliate",
utm_content: `${this.type}_banner`,
banner_type: this.type,
},
g = "internal" in this.activePhase && !!this.activePhase?.internal;
(!g && p.setAttribute("target", "_blank"),
"vueschool" !== this.affiliateKey &&
(u.friend = this.affiliateKey?.toUpperCase()));
const h = new URLSearchParams(g ? {} : u).toString();
(p.setAttribute("href", `${r}${g ? "" : "?" + h}`),
p.classList.add(...s),
(p.innerHTML = c),
this.addBodyClasses(),
(function () {
let n = document.querySelector("#bb-banner-video");
(n ||
(n = document.querySelector("#bb-banner-container") || document.body),
n.append(p));
})(),
addEventListener("popstate", (n) => {
this.handleNavigation();
}),
(window.history.pushState = new Proxy(window.history.pushState, {
apply: (n, e, t) => {
const b = n.apply(e, t);
return (this.handleNavigation(), b);
},
})));
},
handleNavigation() {
this.addBodyClasses();
},
addBodyClasses() {
if (!this.isOpen) return;
const n = document.querySelectorAll("html")[0];
(n.classList.add("has-bb-banner"),
n.classList.add(`bb-type-${this.type}`),
this.affiliateKey && n.classList.add(`bb-${this.affiliateKey}`));
const e = window.location.pathname || "/",
t = !!window.BitterBrainsBanner.emulateDate;
!this.allowList[this.affiliateKey] ||
this.allowList[this.affiliateKey](e) ||
t
? n.classList.remove("bb-banner-hidden")
: n.classList.add("bb-banner-hidden");
},
renderCountdown() {
const { showDaysAsHours: n, hideSeconds: e } = this.activePhase,
t = ["hours", "minutes"];
return (
n || t.unshift("days"),
e || t.push("seconds"),
t.map((n) => this.renderCountdownPart(n)).join("")
);
},
renderCountdownPart: (n) =>
`\n \n
\n
${
n[0]
}${n.slice(
1,
)}
\n
\n
:
\n
\n `,
getType() {
if (document.querySelector("#bb-banner-video")) return "video";
return document.querySelector("#bb-banner-container")
? "inline"
: this.type && ["top", "bottom"].includes(this.type)
? this.type
: "top";
},
insertStyleTag() {
const n = document.createElement("style");
((n.textContent = window.BitterBrainsBanner.style),
document.head.append(n));
},
close() {
document.querySelector("#bb-banner").remove();
const n = document.querySelectorAll("html")[0];
(n.classList.remove("has-bb-banner"),
n.classList.remove("bb-banner-container"),
clearInterval(this.countdownInterval),
(this.isOpen = !1));
},
bindCloseButton() {
document.querySelector("#bb-close").addEventListener("click", (n) => {
(n.preventDefault(),
n.stopPropagation(),
this.close(),
localStorage.setItem(this.activePhase.closedKey, 1),
localStorage.setItem(`${this.activePhase.id}_BANNER`, 1));
});
},
startCountdown() {
this.activePhase.countdownRemaining < 0 ||
(this.updateCountdown(),
this.activePhase.isCountdownStatic ||
(this.countdownInterval = setInterval(() => {
((this.activePhase.countdownRemaining -= 1e3),
this.activePhase.countdownRemaining > 0
? this.updateCountdown()
: this.close());
}, 1e3)));
},
updateCountdown() {
if (!this.isOpen) return;
const { countdownRemaining: n, showDaysAsHours: e } = this.activePhase,
t = {
days: Math.floor(n / 864e5),
hours: Math.floor((n % 864e5) / 36e5),
minutes: Math.floor((n % 36e5) / 6e4),
seconds: Math.floor((n % 6e4) / 1e3),
};
e && ((t.hours = t.hours + 24 * t.days), delete t.days);
for (const [n, e] of Object.entries(t)) {
const t = document.querySelector(`[data-countdown=${n}]`);
t && (t.textContent = e.toString().padStart(2, "0"));
}
},
init() {
if (
!this.activePhase ||
localStorage.getItem(this.activePhase.closedKey) ||
this.isInitiated
)
return console.info("Not initiating");
((this.isOpen = !0), (this.isInitiated = !0));
const n = setInterval(() => {
"complete" === document.readyState &&
(clearInterval(n),
(this.type = this.getType()),
this.insertStyleTag(),
this.render(),
this.bindCloseButton(),
this.activePhase.showCountdown && this.startCountdown());
}, 100);
},
}),
(window.BitterBrainsBanner.style =
"\n :root { --bb-logo-desktop: url(/banners/logo.svg);--bb-logo-tablet: url(/banners/mark.svg);--bb-logo-mobile: url(/banners/mark.svg); }#bb-banner {\n height: 72px;\n text-decoration: none;\n color: white;\n padding-right: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #000;\n overflow: hidden;\n line-height: 1.25;\n background: var(--bb-gradient);\n direction: ltr !important;\n}\n\n#bb-banner .bb-logo {\n width: 30px;\n height: 19px;\n left: 16px;\n position: absolute;\n background-size: contain;\n background-repeat: no-repeat;\n background-image: var(--bb-logo-mobile);\n}\n\n#bb-banner .bb-close {\n font-family: sans-serif;\n color: white;\n position: absolute;\n top: 29px;\n right: 8px;\n line-height: 0;\n font-size: 24px;\n height: 14px;\n width: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n#bb-banner .bb-background {\n background-image: var(--bb-bg-mobile);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n position: absolute;\n z-index: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n#bb-banner .bb-core {\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n z-index: 10;\n flex-direction: column;\n}\n\n#bb-banner .bb-core .bb-slogan {\n display: flex;\n flex-direction: row;\n align-items: center;\n order: 1;\n}\n\n#bb-banner .bb-core .bb-title-container {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 2px;\n}\n\n#bb-banner .bb-core .bb-extended {\n display: none;\n}\n\n#bb-banner .bb-core .bb-title {\n font-size: 14px;\n font-weight: bold;\n color: #00dc82;\n}\n\n#bb-banner .bb-core .bb-subtitle {\n color: #FFF;\n font-size: 12px;\n}\n\n#bb-banner .bb-core .bb-button-wrapper {\n order: 2;\n}\n\n#bb-banner .bb-core .bb-button-wrapper .bb-button {\n border-radius: 6px;\n font-weight: bold;\n color: #000;\n background: white;\n font-size: 14px;\n padding: 14px 8px;\n white-space: nowrap;\n}\n\n#bb-banner .bb-core .bb-countdown-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: 6px;\n order: 3;\n}\n\n#bb-banner .bb-core .bb-countdown-wrapper .bb-countdown-footer {\n order: 1;\n}\n\n#bb-banner .bb-core .bb-countdown {\n align-items: center;\n line-height: 1;\n display: flex;\n font-weight: bold;\n font-size: 12px;\n color: #00dc82;\n order: 2;\n}\n\n#bb-banner .bb-core .bb-countdown .bb-countdown-item {\n display: flex;\n align-items: center;\n}\n\n#bb-banner .bb-core .bb-countdown .bb-countdown-item .bb-countdown-part > div {\n display: inline;\n}\n\n#bb-banner .bb-core .bb-countdown .bb-countdown-item:last-child .bb-countdown-colon {\n display: none;\n}\n\n#bb-banner .bb-core .bb-countdown .bb-countdown-item .bb-countdown-part .bb-countdown-text .bb-countdown-text-initial~span {\n display: none;\n}\n\n\n@media screen and (max-width: 768px) {\n #bb-banner {\n padding-right: 0px !important;\n }\n}\n\n@media (min-width: 768px) {\n\n #bb-banner .bb-close {\n right: 12px;\n }\n\n #bb-banner .bb-core {\n gap: 12px;\n flex-direction: row;\n }\n\n #bb-banner .bb-background {\n background-image: var(--bb-bg-tablet);\n }\n\n #bb-banner .bb-logo {\n background-image: var(--bb-logo-tablet);\n }\n\n #bb-banner .bb-core .bb-title {\n font-size: 18px;\n }\n\n #bb-banner .bb-core .bb-subtitle {\n font-size: 16px;\n }\n\n #bb-banner .bb-core .bb-button-wrapper {\n display: block;\n }\n\n #bb-banner .bb-core .bb-button-wrapper .bb-button {\n font-size: 18px;\n }\n\n #bb-banner .bb-core .bb-countdown-wrapper {\n flex-direction: column-reverse;\n }\n}\n\n@media (min-width: 1280px) {\n #bb-banner .bb-core .bb-title-container {\n gap: 4px;\n }\n \n #bb-banner .bb-logo {\n width: 152px;\n left: 24px;\n background-image: var(--bb-logo-desktop);\n }\n\n #bb-banner .bb-core .bb-slogan {\n gap: 4px;\n }\n\n #bb-banner .bb-background {\n background-image: var(--bb-bg-desktop);\n }\n\n #bb-banner .bb-core {\n gap: 32px;\n }\n\n #bb-banner .bb-core .bb-countdown-wrapper {\n flex-direction: column-reverse;\n }\n}\n\nhtml.has-bb-banner.bb-banner-hidden #bb-banner {\n display: none;\n}\n\n/*\nBANNER TYPES\n*********************************************************/\n\n/* Banner rendered in container element */\n\nhtml.has-bb-banner #bb-banner-container #bb-banner, html.has-bb-banner #bb-banner-video #bb-banner {\n position: relative;\n}\n\nhtml.has-bb-banner #bb-banner-container #bb-banner .bb-close {\n/* display: none;*/\n}\n\n/* Banner Fixed Top */\n\nhtml.has-bb-banner.bb-type-top {\n margin-top: 72px;\n}\n\nhtml.has-bb-banner.bb-type-top.bb-banner-hidden {\n margin-top: 0;\n}\n\nhtml.has-bb-banner.bb-type-top #bb-banner {\n position: fixed;\n top: 0;\n z-index: 60;\n left: 0;\n right: 0;\n}\n\n/* Banner Fixed Bottom */\n\nhtml.has-bb-banner.bb-type-bottom #bb-banner {\n position: fixed;\n bottom: 10px;\n z-index: 60;\n left: 10px;\n right: 10px;\n}\n/* Vue School */\n\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent {\n background: #100D1C;\n font-family: 'Inter', sans-serif;\n}\n\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent:hover .bb-core .bb-button-wrapper .bb-button {\n background: #0EFAA5;\n color: #100D1C;\n transition: background-color 0.5s, color 0.5s; \n }\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-logo {\n width: 122px;\n height: 40px;\n position: relative;\n display: block;\n background: url('/banners/logo.svg') !important;\n background-repeat: no-repeat;\n}\n\n\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core {\n gap: 60px;\n transform: translateX(80px);\n\n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container {\n display: flex;\n flex-direction: column;\n}\n\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-prelude {\ncolor: #FFF;\nfont-size: 24px;\nfont-style: normal;\nfont-weight: 900;\nline-height: normal; \nwidth: auto;\n \n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-prelude b {\n background: var(--Gradient, linear-gradient(90deg, #0EFAA5 1.04%, #FAFF00 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent; \n font-style: normal;\n font-weight: 00;\n line-height: normal; \n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan {\n gap: 60px;\n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-title {\n color: white;\ntext-align: center;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: normal; \n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-title b {\n color: #0EFAA5;\n font-weight: 700;\n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-subtitle {\n font-weight: 700;\n}\n\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-countdown-container .bb-addendum {color: var(--White, #FFF);\n text-align: center;\n font-size: 10px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n letter-spacing: 1px;\n text-transform: uppercase; \n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-countdown-container {\n order: 3;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-countdown-container .bb-countdown {\npadding: 6px 14px;\nborder-radius: 4px;\nbackground: rgba(43, 246, 163, 0.20);\ncolor: white;\ntext-align: center;\nfont-size: 18px;\nfont-style: normal;\nfont-weight: 800;\nline-height: normal;\nletter-spacing: 1.4px; \n}\n\n#bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-button-wrapper .bb-button {\n display: flex;\n color: white;\n align-items: center;\n justify-items: center;\n height: 44px;\n padding: 0px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 50px;\nborder: 2px solid #0EFAA5;\nbackground: rgba(14, 250, 165, 0.40);\nfont-size: 14px;\nfont-style: normal;\nfont-weight: 700;\nline-height: normal; \n}\n\n\n\n@media screen and (max-width: 1440px) {\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core{\n gap: 30px;\n transform: translateX(0px);\n\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-countdown-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-logo {\n width: 50px;\n height: 40px;\n position: relative;\n display: block;\n background: url('/banners/mark.svg') !important;\n background-repeat: no-repeat !important;\n margin-right: 40px;\n }\n}\n@media screen and (max-width: 1280px) {\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container {\n display: flex;\n flex-direction: column;\n }\n}\n\n@media screen and (max-width: 1234px) {\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core{\n margin-right: 40px;\n }\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-countdown-container {\n display: flex;\n flex-direction: row;\n justify-items: center;\n position: absolute;\n bottom: 0%;\n left: 50%;\n transform: translate(-35%, 46%);\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-countdown-container .bb-countdown {\n color: #0BD88F;\n padding: 0px;\n background: transparent;\ntext-align: center;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 700;\nline-height: 16px; /* 177.778% */\nletter-spacing: 0.9px; \nmargin-left: 2px;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container {\n margin-top: -10px;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-logo {\n width: 35px;\n height: 40px;\n position: relative;\n display: block;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan {\n gap: 20px;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-prelude {\n width: 160px;\n text-align: center;\n font-size: 20px;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container .bb-title, #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container .bb-subtitle {\n font-size: 14px !important;\n }\n}\n\n@media screen and (max-width: 768px) {\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-countdown-container {\n position: relative;\n bottom: 0%;\n left: 0%;\n transform: translate(0%, 0%);\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan {\n margin-top: 0px;\n gap: 0px;\n flex-direction: column;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container {\n margin-top: 0px;\n gap: 0px;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core {\n gap: 0px;\n flex-direction: column;\n \n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container .bb-title, #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-title-container .bb-subtitle {\n font-size: 11px !important;\n }\n \n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-button-wrapper {\n display: none;\n }\n\n #bb-banner.bb-campaign-vs-affiliates-freeweekend-urgent .bb-core .bb-slogan .bb-prelude {\n font-size: 13px; \n width: auto;\n }\n}\n/* Vue Router and Pinia */\n\nhtml.has-bb-banner .theme,\nhtml.has-bb-banner .theme .nav-bar,\nhtml.has-bb-banner .theme .sidebar,\nhtml.has-bb-banner .theme .page {\n margin-top: 72px;\n}\n\n/* Vite Press */\n\nhtml.has-bb-banner {\n scroll-padding-top: 134px;\n overflow: auto;\n}\n\nhtml.has-bb-banner .VPSidebar,\nhtml.has-bb-banner .VPDoc.has-sidebar.has-aside .aside-container {\n top: 72px;\n}\n\n@media (min-width: 960px) {\n html.has-bb-banner .VPNav {\n top: 72px;\n }\n}\n\n "));
try {
window.BitterBrainsBanner.init();
} catch {
console.warn("Error when trying to render top banner");
}