计协官网

2025-05-03 23:18:01 +08:00 · 2025-05-03 23:18:01 +08:00 · 28d607ec9f
commit 28d607ec9f
parent e5909159fb
1 changed files with 234 additions and 181 deletions
--- a/index.html
+++ b/index.html
@ -132,6 +132,11 @@
            color: var(--secondary-color);
        }

+        .logo img {
+            width: auto;
+            height: 50px;
+        }
+
        /* 汉堡菜单按钮 */
        .hamburger {
            display: none;
@ -162,7 +167,8 @@
            top: 0;
        }

-        .hamburger span:nth-child(2), .hamburger span:nth-child(3) {
+        .hamburger span:nth-child(2),
+        .hamburger span:nth-child(3) {
            top: 9px;
        }

@ -229,11 +235,11 @@
            border-radius: 50%;
        }

-        input:checked + .slider {
+        input:checked+.slider {
            background-color: var(--secondary-color);
        }

-        input:checked + .slider:before {
+        input:checked+.slider:before {
            transform: translateX(30px);
        }

@ -475,17 +481,17 @@
            color: var(--secondary-color);
            font-size: 18px;
        }
-        
+
        .loading-spinner i {
            margin-right: 10px;
        }
-        
+
        .news-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
-        
+
        .error-message {
            color: #ff6b6b;
            text-align: center;
@ -498,11 +504,11 @@
            .hero-title {
                font-size: 48px;
            }
-            
+
            .nav-links {
                display: none;
            }
-            
+
            .hamburger {
                display: block;
            }
@ -512,23 +518,23 @@
            .hero-title {
                font-size: 36px;
            }
-            
+
            .hero-description {
                font-size: 16px;
            }
-            
+
            .section-title {
                font-size: 28px;
            }
-            
+
            .links-grid {
                grid-template-columns: 1fr;
            }
-            
+
            .footer-links {
                flex-wrap: wrap;
            }
-            
+
            .footer-links li {
                margin: 10px 15px;
            }
@ -538,37 +544,53 @@
            .hero-title {
                font-size: 32px;
            }
-            
+
            .hero-subtitle {
                font-size: 16px;
            }
-            
+
            .btn {
                padding: 10px 20px;
                font-size: 14px;
            }
-            
+
            .theme-switch {
                width: 50px;
                height: 25px;
                margin-left: 15px;
            }
-            
+
            .slider:before {
                height: 18px;
                width: 18px;
                bottom: 3.5px;
                left: 3.5px;
            }
-            
-            input:checked + .slider:before {
+
+            input:checked+.slider:before {
                transform: translateX(25px);
            }
-            
+
            .slider .icon {
                font-size: 12px;
            }
        }
+
+        .close-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 24px;
+            cursor: pointer;
+            z-index: 1001;
+        }
+
+        .close-btn:hover {
+            color: var(--secondary-color);
+        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
@ -578,7 +600,9 @@
    <header>
        <div class="container">
            <nav>
-                <div class="logo">石科信计算机协会</div>
+                <div class="logo">
+                    <img id="logoImage" src="images/skx-w.png" alt="石科信计算机协会">
+                </div>
                <button class="hamburger" id="hamburger">
                    <span></span>
                    <span></span>
@ -607,6 +631,9 @@

    <!-- 移动端导航菜单 -->
    <div class="mobile-nav" id="mobileNav">
+        <button class="close-btn" id="closeBtn">
+            <i class="fas fa-times"></i>
+        </button>
        <ul class="mobile-nav-links">
            <li><a href="/">首页</a></li>
            <li><a href="/about">协会介绍</a></li>
@ -694,180 +721,206 @@
    </footer>

    <script>
-        // 平滑滚动
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
+    // 获取主题切换开关元素
+const themeToggle = document.getElementById('themeToggle');
+const mobileThemeToggle = document.getElementById('mobileThemeToggle');

-                document.querySelector(this.getAttribute('href')).scrollIntoView({
-                    behavior: 'smooth'
-                });
-            });
+// 获取 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';
-            }
-        });
+// 导航栏滚动效果
+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 hamburger = document.getElementById('hamburger');
+const mobileNav = document.getElementById('mobileNav');

-        // 主题切换功能
-        const themeToggle = document.getElementById('themeToggle');
-        const mobileThemeToggle = document.getElementById('mobileThemeToggle');
+hamburger.addEventListener('click', function () {
+    this.classList.toggle('open');
+    mobileNav.classList.toggle('open');

-        // 检查本地存储中的主题偏好
-        const currentTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', currentTheme);
-        updateThemeToggle(currentTheme);
+    // 切换body的overflow以防止页面滚动
+    if (mobileNav.classList.contains('open')) {
+        document.body.style.overflow = 'hidden';
+    } else {
+        document.body.style.overflow = '';
+    }
+});

-        // 切换主题
-        function toggleTheme() {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+// 关闭移动菜单当点击菜单项
+document.querySelectorAll('.mobile-nav-links a').forEach(link => {
+    link.addEventListener('click', function () {
+        hamburger.classList.remove('open');
+        mobileNav.classList.remove('open');
+        document.body.style.overflow = '';
+    });
+});

-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            updateThemeToggle(newTheme);
+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);
+
+// 获取最新文章的函数
+async function fetchLatestNews() {
+    const newsContainer = document.getElementById('newsContainer');
+
+    try {
+        // 构造API请求URL
+        const apiUrl = new URL('https://news.skxjx.holytreasure.space/');
+        apiUrl.searchParams.append('rest-api', 'article_list');
+        apiUrl.searchParams.append('count', '3'); // 获取3篇文章
+        apiUrl.searchParams.append('sort_id', '2'); // 分类ID为2的文章
+        apiUrl.searchParams.append('order', 'views'); // 按浏览量排序(可选)
+
+        const response = await fetch(apiUrl.toString());
+
+        if (!response.ok) {
+            throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }

-        // 更新主题切换状态
-        function updateThemeToggle(theme) {
-            const isLight = theme === 'light';
-            themeToggle.checked = isLight;
-            mobileThemeToggle.checked = isLight;
+        const result = await response.json();
+
+        // 检查API返回的数据结构
+        if (result.code !== 0 || !result.data || !result.data.articles) {
+            throw new Error('API返回数据格式不正确');
        }

-        // 添加事件监听器
-        themeToggle.addEventListener('change', toggleTheme);
-        mobileThemeToggle.addEventListener('change', toggleTheme);
+        renderNews(result.data.articles);
+    } catch (error) {
+        console.error('获取最新动态失败:', error);
+        newsContainer.innerHTML = `
+            <div class="error-message">
+                <i class="fas fa-exclamation-triangle"></i>
+                <p>加载动态失败: ${error.message}</p>
+                <p>请稍后刷新页面重试</p>
+            </div>
+        `;
+    }
+}

-        // 获取最新文章的函数
-        async function fetchLatestNews() {
-            const newsContainer = document.getElementById('newsContainer');
-            
-            try {
-                // 构造API请求URL
-                const apiUrl = new URL('https://news.skxjx.holytreasure.space/');
-                apiUrl.searchParams.append('rest-api', 'article_list');
-                apiUrl.searchParams.append('count', '3'); // 获取3篇文章
-                apiUrl.searchParams.append('sort_id', '2'); // 分类ID为2的文章
-                apiUrl.searchParams.append('order', 'views'); // 按浏览量排序(可选)
-                
-                const response = await fetch(apiUrl.toString());
-                
-                if (!response.ok) {
-                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
-                }
-                
-                const result = await response.json();
-                
-                // 检查API返回的数据结构
-                if (result.code !== 0 || !result.data || !result.data.articles) {
-                    throw new Error('API返回数据格式不正确');
-                }
-                
-                renderNews(result.data.articles);
-            } catch (error) {
-                console.error('获取最新动态失败:', error);
-                newsContainer.innerHTML = `
-                    <div class="error-message">
-                        <i class="fas fa-exclamation-triangle"></i>
-                        <p>加载动态失败: ${error.message}</p>
-                        <p>请稍后刷新页面重试</p>
-                    </div>
-                `;
-            }
+// 渲染文章列表
+function renderNews(articles) {
+    const newsContainer = document.getElementById('newsContainer');
+    newsContainer.innerHTML = '';
+
+    if (!articles || articles.length === 0) {
+        newsContainer.innerHTML = '<p class="no-news">暂无最新动态</p>';
+        return;
+    }
+
+    articles.forEach(article => {
+        const newsCard = document.createElement('div');
+        newsCard.className = 'news-card';
+
+        // 格式化日期 (从 "2021-10-11 08:04:11" 转为 "2021年10月11日")
+        const formattedDate = formatDate(article.date);
+
+        // 构造文章卡片
+        newsCard.innerHTML = `
+            <div class="news-image">
+                ${article.cover ?
+                `<img src="${article.cover}" alt="${article.title}" loading="lazy">` :
+                '<div class="default-image">文章图片</div>'}
+            </div>
+            <div class="news-content">
+                <p class="news-date">${formattedDate}</p>
+                <h3 class="news-title">${article.title}</h3>
+                <p class="news-excerpt">${article.description || '暂无摘要'}</p>
+                <div class="article-meta">
+                    <span><i class="far fa-eye"></i> ${article.views}</span>
+                    <span><i class="far fa-comment"></i> ${article.comnum}</span>
+                    ${article.sort_name ? `<span><i class="fas fa-tag"></i> ${article.sort_name}</span>` : ''}
+                </div>
+                <a href="${article.url}" class="btn" target="_blank">阅读更多</a>
+            </div>
+        `;
+
+        newsContainer.appendChild(newsCard);
+    });
+}
+
+// 辅助函数：格式化日期
+function formatDate(dateString) {
+    if (!dateString) return '未知日期';
+
+    try {
+        const date = new Date(dateString);
+        if (isNaN(date.getTime())) {
+            return dateString; // 如果无法解析，返回原始字符串
        }
-        
-        // 渲染文章列表
-        function renderNews(articles) {
-            const newsContainer = document.getElementById('newsContainer');
-            newsContainer.innerHTML = '';
-            
-            if (!articles || articles.length === 0) {
-                newsContainer.innerHTML = '<p class="no-news">暂无最新动态</p>';
-                return;
-            }
-            
-            articles.forEach(article => {
-                const newsCard = document.createElement('div');
-                newsCard.className = 'news-card';
-                
-                // 格式化日期 (从 "2021-10-11 08:04:11" 转为 "2021年10月11日")
-                const formattedDate = formatDate(article.date);
-                
-                // 构造文章卡片
-                newsCard.innerHTML = `
-                    <div class="news-image">
-                        ${article.cover ? 
-                            `<img src="${article.cover}" alt="${article.title}" loading="lazy">` : 
-                            '<div class="default-image">文章图片</div>'}
-                    </div>
-                    <div class="news-content">
-                        <p class="news-date">${formattedDate}</p>
-                        <h3 class="news-title">${article.title}</h3>
-                        <p class="news-excerpt">${article.description || '暂无摘要'}</p>
-                        <div class="article-meta">
-                            <span><i class="far fa-eye"></i> ${article.views}</span>
-                            <span><i class="far fa-comment"></i> ${article.comnum}</span>
-                            ${article.sort_name ? `<span><i class="fas fa-tag"></i> ${article.sort_name}</span>` : ''}
-                        </div>
-                        <a href="${article.url}" class="btn" target="_blank">阅读更多</a>
-                    </div>
-                `;
-                
-                newsContainer.appendChild(newsCard);
-            });
-        }
-        
-        // 辅助函数：格式化日期
-        function formatDate(dateString) {
-            if (!dateString) return '未知日期';
-            
-            try {
-                const date = new Date(dateString);
-                if (isNaN(date.getTime())) {
-                    return dateString; // 如果无法解析，返回原始字符串
-                }
-                
-                return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
-            } catch (e) {
-                return dateString;
-            }
-        }
-        
-        // 页面加载完成后获取最新动态
-        document.addEventListener('DOMContentLoaded', fetchLatestNews);
-    </script>
+
+        return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
+    } catch (e) {
+        return dateString;
+    }
+}
+
+// 页面加载完成后获取最新动态
+document.addEventListener('DOMContentLoaded', fetchLatestNews);
+</script>
 </body>

 </html>