mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 19:35:50 +00:00
309 lines
11 KiB
JavaScript
Vendored
309 lines
11 KiB
JavaScript
Vendored
const menuBtn = document.getElementById("menuBtn"); // 768模式下的菜单按钮
|
|
const drawer = document.querySelector(".drawer"); // 768模式下的菜单
|
|
const theme_light = document.querySelectorAll(".theme_light");
|
|
const theme_dark = document.querySelectorAll(".theme_dark");
|
|
/* 主题切换更换图片 */
|
|
const themeSwitch = (val1, val2) => {
|
|
theme_light.forEach((item) => {
|
|
item.style.display = val1;
|
|
});
|
|
theme_dark.forEach((item) => {
|
|
item.style.display = val2;
|
|
});
|
|
};
|
|
/* 更换图片 */
|
|
const changeImageSrc = (img, src) => {
|
|
const imgDom = document.querySelectorAll(img);
|
|
const url = window.location.href; // 获取当前浏览器 URL
|
|
if (imgDom.length > 0) {
|
|
imgDom.forEach((item) => {
|
|
item.src = url.includes("site/i")
|
|
? `./img/${src}`
|
|
: `../img/${src}`;
|
|
});
|
|
}
|
|
};
|
|
/* 设置默认语言 */
|
|
if (!localStorage.getItem("lang")) {
|
|
localStorage.setItem("lang", "zh");
|
|
}
|
|
/* 设置默认主题 */
|
|
const localStorageTheme = localStorage.getItem("theme");
|
|
if (!localStorageTheme) {
|
|
setTheme("light");
|
|
localStorage.setItem("theme", "light");
|
|
} else {
|
|
setTheme(localStorageTheme);
|
|
}
|
|
|
|
/* 切换主题函数 */
|
|
function setTheme(theme) {
|
|
const root = document.documentElement;
|
|
const lang = localStorage.getItem("lang");
|
|
changeImageSrc("#logo", `${theme}/logo.svg`);
|
|
changeImageSrc("#home_pic", `${theme}/${lang}_home_pic1.png`);
|
|
changeImageSrc("#home_pic2", `${theme}/${lang}_home_pic2.png`);
|
|
changeImageSrc("#home_pic3", `${theme}/${lang}_home_pic3.png`);
|
|
changeImageSrc("#home_pic4", `${theme}/${lang}_home_pic4.png`);
|
|
changeImageSrc("#home_pic5", `${theme}/${lang}_home_pic5.png`);
|
|
changeImageSrc("#home_pic6", `${theme}/${lang}_home_pic6.png`);
|
|
changeImageSrc("#solution_pic1", `${theme}/${lang}_solution_pic1.png`);
|
|
changeImageSrc("#solution_pic2", `${theme}/${lang}_solution_pic2.png`);
|
|
changeImageSrc("#solution_pic3", `${theme}/${lang}_solution_pic3.png`);
|
|
changeImageSrc("#dow_pic1", `${theme}/${lang}_dow_pic1.png`);
|
|
changeImageSrc("#solution_pic4", `${theme}/solution_pic4.png`);
|
|
changeImageSrc("#about_pic1", `${theme}/about_pic1.png`);
|
|
changeImageSrc("#home_icon1", `${theme}/home_icon1.png`);
|
|
changeImageSrc("#home_icon2", `${theme}/home_icon2.png`);
|
|
changeImageSrc("#home_icon3", `${theme}/home_icon3.png`);
|
|
changeImageSrc("#home_icon4", `${theme}/home_icon4.png`);
|
|
changeImageSrc("#home_pic7", `${theme}/home_pic7.svg`);
|
|
changeImageSrc("#home_pic7_768", `${theme}/home_pic7_768.svg`);
|
|
changeImageSrc("#help_pic2", `${theme}/help_pic2.png`);
|
|
changeImageSrc("#help_pic3", `${theme}/help_pic3.png`);
|
|
root.style.setProperty(
|
|
"--bg-pic7-url",
|
|
`url(../img/${theme}/home_pic7.svg)`
|
|
);
|
|
root.style.setProperty(
|
|
"--bg-pic7-768-url",
|
|
`url(../img/${theme}/home_pic7-768.svg)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-pic1-url`,
|
|
`url(../img/${theme}/${lang}_dow_pic1.png)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-pic2-url`,
|
|
`url(../img/${theme}/help_pic1.svg)`
|
|
);
|
|
root.style.setProperty(`--bg-1-url`, `url(../img/${theme}/bg1.png)`);
|
|
root.style.setProperty(`--bg-2-url`, `url(../img/${theme}/bg2.png)`);
|
|
root.style.setProperty(`--bg-3-url`, `url(../img/${theme}/bg3.png)`);
|
|
root.style.setProperty(`--bg-4-url`, `url(../img/${theme}/bg4.png)`);
|
|
root.style.setProperty(`--bg-5-url`, `url(../img/${theme}/bg5.png)`);
|
|
root.style.setProperty(`--bg-6-url`, `url(../img/${theme}/bg6.png)`);
|
|
root.style.setProperty(`--bg-7-url`, `url(../img/${theme}/bg7.png)`);
|
|
root.style.setProperty(`--bg-8-url`, `url(../img/${theme}/bg8.png)`);
|
|
root.style.setProperty(`--bg-9-url`, `url(../img/${theme}/bg9.png)`);
|
|
root.style.setProperty(`--bg-10-url`, `url(../img/${theme}/bg10.png)`);
|
|
root.style.setProperty(`--bg-11-url`, `url(../img/${theme}/bg11.png)`);
|
|
root.style.setProperty(
|
|
`--bg-768-3-url`,
|
|
`url(../img/${theme}/bg3_768.png)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-768-4-url`,
|
|
`url(../img/${theme}/bg4_768.png)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-768-5-url`,
|
|
`url(../img/${theme}/bg5_768.png)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-768-6-url`,
|
|
`url(../img/${theme}/bg6_768.png)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-768-7-url`,
|
|
`url(../img/${theme}/bg7_768.png)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-768-8-url`,
|
|
`url(../img/${theme}/bg8_768.png)`
|
|
);
|
|
root.style.setProperty(
|
|
`--bg-768-9-url`,
|
|
`url(../img/${theme}/bg9_768.png)`
|
|
);
|
|
root.style.setProperty("--bg-color", theme === "dark" ? "#1E1E1E" : "#fff");
|
|
root.style.setProperty("--text-color", theme === "dark" ? "#fff" : "#000");
|
|
root.style.setProperty(
|
|
"--txt-gray-color",
|
|
theme === "dark" ? "#888C8A" : "#727570"
|
|
);
|
|
root.style.setProperty(
|
|
"--txt-4ca5",
|
|
theme === "dark" ? "#A5ACA9" : "#4C4E4B"
|
|
);
|
|
root.style.setProperty(
|
|
"--txt-theme-color",
|
|
theme === "dark" ? "#58A738" : "#8BCF70"
|
|
);
|
|
root.style.setProperty(
|
|
"--bg-hover-color",
|
|
theme === "dark" ? "#2C312E" : "#F2F3F1"
|
|
);
|
|
root.style.setProperty(
|
|
"--btn-hover-color",
|
|
theme === "dark" ? "#5EB939" : "#98d87f"
|
|
);
|
|
root.style.setProperty(
|
|
"--choose-bg-hover-color",
|
|
theme === "dark" ? "#2E3533" : "#fff"
|
|
);
|
|
root.style.setProperty(
|
|
"--box-shadow-color",
|
|
theme === "dark" ? "rgba(0, 0, 0, 0.12)" : "rgba(234, 236, 242, 0.5)"
|
|
);
|
|
root.style.setProperty(
|
|
"--border-color",
|
|
theme === "dark" ? "#2F3329" : "#E7E9E4"
|
|
);
|
|
root.style.setProperty(
|
|
"--pop-bg-color",
|
|
theme === "dark" ? "#202124" : "#fff"
|
|
);
|
|
root.style.setProperty(
|
|
"--bg-fa-color",
|
|
theme === "dark" ? "#262B2A" : "#fafafa"
|
|
);
|
|
root.style.setProperty(
|
|
"--txt-191a15-color",
|
|
theme === "dark" ? "#fff" : "#191a15"
|
|
);
|
|
root.style.setProperty(
|
|
"--bg-rec-color",
|
|
theme === "dark" ? "#D6B300" : "#FFDD33"
|
|
);
|
|
root.style.setProperty(
|
|
"--bg-292c2f-color",
|
|
theme === "dark" ? "#292C2F" : "#fff"
|
|
);
|
|
root.style.setProperty(
|
|
"--pop-box-shadow",
|
|
theme === "dark"
|
|
? "0px 4px 16px 8px rgba(0, 0, 0, 0.12)"
|
|
: "0px 0px 8px #F3F2F5"
|
|
);
|
|
root.style.setProperty(
|
|
"--code-bg-color",
|
|
theme === "dark" ? "#2E3533" : "#000"
|
|
);
|
|
theme === "dark"
|
|
? themeSwitch("none", "block")
|
|
: themeSwitch("block", "none");
|
|
localStorage.setItem("theme", theme);
|
|
drawer.classList.remove("open-drawer");
|
|
}
|
|
/* 导航选中激活 */
|
|
const url = window.location.pathname;
|
|
const currentTabName = url.split("/")[url.split("/").length - 1].split(".")[0];
|
|
if (
|
|
currentTabName &&
|
|
currentTabName != "index" &&
|
|
currentTabName != "help" &&
|
|
currentTabName != "download" &&
|
|
currentTabName != "log"
|
|
) {
|
|
const currentTab = document.querySelector(`.nav-${currentTabName}`);
|
|
if (currentTab) {
|
|
currentTab.style.backgroundColor = "var(--bg-hover-color)";
|
|
currentTab.style.color = "var(--text-color)";
|
|
currentTab.style.borderRadius = "6px";
|
|
}
|
|
}
|
|
/* 导航下拉菜单函数 */
|
|
const submenuPopDom = document.querySelector("#submenu-pop");
|
|
const dropDownSvgDom = document.querySelector("#drop-down-svg");
|
|
const showMenuPopHandle = () => {
|
|
submenuPopDom.style.display = "block";
|
|
dropDownSvgDom.style.transform = "rotate(180deg)";
|
|
};
|
|
const changeMenu = (type) => {
|
|
submenuPopDom.style.display = "none";
|
|
dropDownSvgDom.style.transform = "";
|
|
};
|
|
document.addEventListener("click", function (event) {
|
|
if (!event.target.closest("#support-txt")) {
|
|
submenuPopDom.style.display = "none";
|
|
dropDownSvgDom.style.transform = "";
|
|
}
|
|
});
|
|
/* 语言切换函数 */
|
|
const langPopDom = document.querySelector("#lang-pop");
|
|
const shouLangPopHandle = () => {
|
|
langPopDom.style.display = "block";
|
|
};
|
|
const changeLanguage = (type) => {
|
|
const str = window.location.pathname;
|
|
const index = str.lastIndexOf("/");
|
|
const newStr = str.slice(index + 1);
|
|
const lang = localStorage.getItem("lang");
|
|
if (type != lang) {
|
|
if (str.includes("site")) {
|
|
window.location.href = `/site/${type}/${newStr}`;
|
|
} else {
|
|
window.location.href = `/site/${type}/index.html`;
|
|
}
|
|
} else {
|
|
if (str.includes("site")) {
|
|
window.location.href = `/site/${lang}/${newStr}`;
|
|
} else {
|
|
window.location.href = `/site/${lang}/index.html`;
|
|
}
|
|
}
|
|
langPopDom.style.display = "none";
|
|
localStorage.setItem("lang", type);
|
|
drawer.classList.remove("open-drawer");
|
|
};
|
|
document.addEventListener("click", function (event) {
|
|
if (!event.target.closest("#lang-img")) {
|
|
langPopDom.style.display = "none";
|
|
}
|
|
});
|
|
/* 当屏幕宽度低于768px时显示菜单的抽屉的相关操作逻辑 */
|
|
menuBtn.addEventListener("click", () => {
|
|
drawer.classList.add("open-drawer");
|
|
});
|
|
const closeDraweHandle = () => {
|
|
drawer.classList.remove("open-drawer");
|
|
};
|
|
window.addEventListener("click", (e) => {
|
|
if (!drawer.contains(e.target) && e.target !== menuBtn) {
|
|
drawer.classList.remove("open-drawer");
|
|
}
|
|
});
|
|
const expandMenuHandle = (val) => {
|
|
const actives = document.querySelector(`#${val}`);
|
|
const dropDownSvgDom = document.querySelector(`#drawer-down-${val}-svg`);
|
|
if (actives.style.display == "none") {
|
|
actives.style.display = "block";
|
|
dropDownSvgDom.style.transform = "rotate(180deg)";
|
|
} else {
|
|
dropDownSvgDom.style.transform = "";
|
|
actives.style.display = "none";
|
|
}
|
|
};
|
|
/* 导航栏悬浮函数 */
|
|
const navbar = document.querySelector(".nav");
|
|
window.addEventListener("scroll", () => {
|
|
if (window.scrollY >= 30) {
|
|
navbar.classList.add("navbar-white");
|
|
} else {
|
|
navbar.classList.remove("navbar-white");
|
|
}
|
|
});
|
|
const openInNewTab = (url) => {
|
|
const win = window.open(url, "_blank");
|
|
win.focus();
|
|
};
|
|
// 点击其他地方置为none
|
|
document.addEventListener("click", function (event) {
|
|
let toolbarPhone = document.getElementById("side_toolbar_item_phone");
|
|
let tooltipPhone = document.getElementById("toolbar_tooltip_phone");
|
|
let toolbarWhtasapp = document.getElementById("side_toolbar_item_whtasapp");
|
|
let tooltipWhtasapp = document.getElementById("toolbar_tooltip_whtasapp");
|
|
let toolbarQrcode = document.getElementById("side_toolbar_item_qrcode");
|
|
let tooltipQrcode = document.getElementById("toolbar_tooltip_qrcode");
|
|
if (!toolbarPhone.contains(event.target)) {
|
|
tooltipPhone.style.display = "none";
|
|
}
|
|
if (!toolbarWhtasapp.contains(event.target)) {
|
|
tooltipWhtasapp.style.display = "none";
|
|
}
|
|
if (!toolbarQrcode.contains(event.target)) {
|
|
tooltipQrcode.style.display = "none";
|
|
}
|
|
});
|