xk/js/main.js

196 lines
5.9 KiB
JavaScript
Raw Normal View History

2026-01-21 10:43:20 +08:00
async function loadServices() {
try {
const res = await fetch("config/card.json");
const cards = await res.json();
const grid = document.getElementById("servicesGrid");
cards.forEach(item => {
const card = document.createElement("div");
card.className = "service-card";
// 判断 src 是图片还是图标
let content;
if (/\.(png|jpe?g|gif|webp|svg)$/i.test(item.src)) {
content = `<img src="${item.src}" alt="${item.title}" />`;
} else {
content = `<i class="${item.src}"></i>`;
}
card.innerHTML = `
<div class="service-img">${content}</div>
<div class="service-content">
<h3>${item.title}</h3>
<p>${item.desc}</p>
</div>
`;
// 如果 url 不为空,整个卡片可点击
if (item.url && item.url.trim() !== "") {
card.style.cursor = "pointer";
card.addEventListener("click", () => {
let targetUrl = item.url.trim();
// 如果不是 http/https 开头,自动补全
if (!/^https?:\/\//i.test(targetUrl)) {
targetUrl = "https://" + targetUrl;
}
window.open(targetUrl, "_blank"); // 新窗口打开
});
}
grid.appendChild(card);
});
} catch (err) {
console.error("加载业务卡片失败:", err);
}
}
async function loadPartners() {
try {
const res = await fetch("config/partners.json");
const partners = await res.json();
const grid = document.getElementById("partnersGrid");
partners.forEach(item => {
const partnerCard = document.createElement("div");
partnerCard.className = "partner-logo";
partnerCard.innerHTML = `
<img src="${item.logo}" alt="${item.name}" />
`;
// 如果 url 不为空,整个卡片可点击
if (item.url && item.url.trim() !== "") {
partnerCard.style.cursor = "pointer";
partnerCard.addEventListener("click", () => {
let targetUrl = item.url.trim();
// 如果不是 http/https 开头,自动补全
if (!/^https?:\/\//i.test(targetUrl)) {
targetUrl = "https://" + targetUrl;
}
window.open(targetUrl, "_blank"); // 新窗口打开
});
}
grid.appendChild(partnerCard);
});
} catch (err) {
console.error("加载合作伙伴失败:", err);
}
}
document.addEventListener("DOMContentLoaded", () => {
loadCases();
loadServices();
loadPartners();
});
async function loadCases() {
try {
// 读取 config/video.json
const res = await fetch("config/video.json");
const cases = await res.json();
const grid = document.getElementById("casesGrid");
cases.forEach(item => {
const card = document.createElement("div");
card.className = "case-card";
card.setAttribute("data-video", item.src);
const previewPath = "img/preview/" + item.title + ".png";
// 用 preview 图片当封面
card.innerHTML = `
<img src="${previewPath}" alt="${item.title}" class="case-preview">
<div class="play-button"><i class="fa-solid fa-play"></i></div>
<div class="case-overlay">
<h3>${item.title}</h3>
<p>${item.desc}</p>
</div>
`;
grid.appendChild(card);
});
// 加载完成后绑定点击播放逻辑
bindVideoModal();
} catch (err) {
console.error("加载案例失败:", err);
}
}
function bindVideoModal() {
const modal = document.getElementById("videoModal");
const modalVideo = document.getElementById("modalVideo");
const closeBtn = modal.querySelector(".close-btn");
// 点击卡片播放
document.querySelectorAll(".case-card .play-button").forEach(button => {
button.addEventListener("click", () => {
const videoSrc = button.parentElement.getAttribute("data-video");
modal.style.display = "flex";
modalVideo.src = videoSrc;
modalVideo.play();
});
});
// 关闭按钮
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
modalVideo.pause();
modalVideo.src = "";
});
// 点击遮罩层关闭
modal.addEventListener("click", (e) => {
if (e.target === modal) {
modal.style.display = "none";
modalVideo.pause();
modalVideo.src = "";
}
});
}
// const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
// hamburger.addEventListener('click', () => {
// navLinks.classList.toggle('active');
// });
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
navLinks.classList.remove('active');
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});