From 28d607ec9f20a862ea6fe6f438f07633180150fc Mon Sep 17 00:00:00 2001
From: "skxjx2024." <holytreasure@163.com>
Date: Sat, 3 May 2025 23:18:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A1=E5=8D=8F=E5=AE=98=E7=BD=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 415 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 234 insertions(+), 181 deletions(-)

diff --git a/index.html b/index.html
index 53c8190..3ecc03e 100644
--- 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>
\ No newline at end of file