www.skxjx/js/about.js

// 获取主题切换开关元素
const themeToggle = document.getElementById('themeToggle');
const mobileThemeToggle = document.getElementById('mobileThemeToggle');

// 获取 logo 图片元素
const logoImage = document.getElementById('logoImage');

// 根据主题模式更新 logo 图片
function updateLogoImage() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    if (currentTheme === 'light') {
        logoImage.src = './images/skx-b.png'; // 亮色模式图片
    } else {
        logoImage.src = './images/skx-w.png'; // 暗色模式图片
    }
}

// 初始化时设置 logo 图片
updateLogoImage();

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// 导航栏滚动效果
window.addEventListener('scroll', function () {
    const header = document.querySelector('header');
    if (window.scrollY > 50) {
        header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
    } else {
        header.style.boxShadow = 'none';
    }
});

// 汉堡菜单功能
const hamburger = document.getElementById('hamburger');
const mobileNav = document.getElementById('mobileNav');

hamburger.addEventListener('click', function () {
    this.classList.toggle('open');
    mobileNav.classList.toggle('open');

    // 切换body的overflow以防止页面滚动
    if (mobileNav.classList.contains('open')) {
        document.body.style.overflow = 'hidden';
    } else {
        document.body.style.overflow = '';
    }
});

// 关闭移动菜单当点击菜单项
document.querySelectorAll('.mobile-nav-links a').forEach(link => {
    link.addEventListener('click', function () {
        hamburger.classList.remove('open');
        mobileNav.classList.remove('open');
        document.body.style.overflow = '';
    });
});

const closeBtn = document.getElementById('closeBtn');

closeBtn.addEventListener('click', function () {
    hamburger.classList.remove('open');
    mobileNav.classList.remove('open');
    document.body.style.overflow = '';
});

// 检查本地存储中的主题偏好
const currentTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', currentTheme);
updateThemeToggle(currentTheme);
updateLogoImage(); // 初始化时也更新logo图片

// 切换主题
function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateThemeToggle(newTheme);
    updateLogoImage(); // 主题切换时更新logo图片
}

// 更新主题切换状态
function updateThemeToggle(theme) {
    const isLight = theme === 'light';
    themeToggle.checked = isLight;
    mobileThemeToggle.checked = isLight;
}

// 添加事件监听器
themeToggle.addEventListener('change', toggleTheme);
mobileThemeToggle.addEventListener('change', toggleTheme);

// 时间轴动画效果
function animateTimeline() {
    const timelineItems = document.querySelectorAll('.timeline-item');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, { threshold: 0.1 });

    timelineItems.forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px)';
        item.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
        observer.observe(item);
    });
}

// 荣誉卡片动画效果
function animateHonorCards() {
    const honorCards = document.querySelectorAll('.honor-card');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, { threshold: 0.1 });

    honorCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
        observer.observe(card);
    });
}

// 页面加载完成后执行动画
document.addEventListener('DOMContentLoaded', function() {
    animateTimeline();
    animateHonorCards();
});