计协官网

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);
         }
 
@@ -561,7 +567,7 @@
                 left: 3.5px;
             }
 
-            input:checked + .slider:before {
+            input:checked+.slider:before {
                 transform: translateX(25px);
             }
 
@@ -569,6 +575,22 @@
                 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,8 +721,28 @@
     </footer>
 
     <script>
-        // 平滑滚动
+    // 获取主题切换开关元素
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+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();
 
@@ -703,23 +750,23 @@
             behavior: 'smooth'
         });
     });
-        });
+});
 
-        // 导航栏滚动效果
+// 导航栏滚动效果
-        window.addEventListener('scroll', function () {
+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 hamburger = document.getElementById('hamburger');
-        const mobileNav = document.getElementById('mobileNav');
+const mobileNav = document.getElementById('mobileNav');
 
-        hamburger.addEventListener('click', function() {
+hamburger.addEventListener('click', function () {
     this.classList.toggle('open');
     mobileNav.classList.toggle('open');
 
@@ -729,49 +776,55 @@
     } else {
         document.body.style.overflow = '';
     }
-        });
+});
 
-        // 关闭移动菜单当点击菜单项
+// 关闭移动菜单当点击菜单项
-        document.querySelectorAll('.mobile-nav-links a').forEach(link => {
+document.querySelectorAll('.mobile-nav-links a').forEach(link => {
-            link.addEventListener('click', function() {
+    link.addEventListener('click', function () {
         hamburger.classList.remove('open');
         mobileNav.classList.remove('open');
         document.body.style.overflow = '';
     });
-        });
+});
 
-        // 主题切换功能
+const closeBtn = document.getElementById('closeBtn');
-        const themeToggle = document.getElementById('themeToggle');
-        const mobileThemeToggle = document.getElementById('mobileThemeToggle');
 
-        // 检查本地存储中的主题偏好
+closeBtn.addEventListener('click', function () {
-        const currentTheme = localStorage.getItem('theme') || 'dark';
+    hamburger.classList.remove('open');
-        document.documentElement.setAttribute('data-theme', currentTheme);
+    mobileNav.classList.remove('open');
-        updateThemeToggle(currentTheme);
+    document.body.style.overflow = '';
+});
 
-        // 切换主题
+// 检查本地存储中的主题偏好
-        function toggleTheme() {
+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) {
+function updateThemeToggle(theme) {
     const isLight = theme === 'light';
     themeToggle.checked = isLight;
     mobileThemeToggle.checked = isLight;
-        }
+}
 
-        // 添加事件监听器
+// 添加事件监听器
-        themeToggle.addEventListener('change', toggleTheme);
+themeToggle.addEventListener('change', toggleTheme);
-        mobileThemeToggle.addEventListener('change', toggleTheme);
+mobileThemeToggle.addEventListener('change', toggleTheme);
 
-        // 获取最新文章的函数
+// 获取最新文章的函数
-        async function fetchLatestNews() {
+async function fetchLatestNews() {
     const newsContainer = document.getElementById('newsContainer');
 
     try {
@@ -806,10 +859,10 @@
             </div>
         `;
     }
-        }
+}
 
-        // 渲染文章列表
+// 渲染文章列表
-        function renderNews(articles) {
+function renderNews(articles) {
     const newsContainer = document.getElementById('newsContainer');
     newsContainer.innerHTML = '';
 
@@ -847,10 +900,10 @@
 
         newsContainer.appendChild(newsCard);
     });
-        }
+}
 
-        // 辅助函数：格式化日期
+// 辅助函数：格式化日期
-        function formatDate(dateString) {
+function formatDate(dateString) {
     if (!dateString) return '未知日期';
 
     try {
@@ -863,11 +916,11 @@
     } catch (e) {
         return dateString;
     }
-        }
+}
 
-        // 页面加载完成后获取最新动态
+// 页面加载完成后获取最新动态
-        document.addEventListener('DOMContentLoaded', fetchLatestNews);
+document.addEventListener('DOMContentLoaded', fetchLatestNews);
-    </script>
+</script>
 </body>
 
 </html>