计协官网

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;
         }
 
@@ -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,6 +721,26 @@
     </footer>
 
     <script>
+    // 获取主题切换开关元素
+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) {
@@ -740,14 +787,19 @@
     });
 });
 
-        // 主题切换功能
-        const themeToggle = document.getElementById('themeToggle');
-        const mobileThemeToggle = document.getElementById('mobileThemeToggle');
+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() {
@@ -757,6 +809,7 @@
     document.documentElement.setAttribute('data-theme', newTheme);
     localStorage.setItem('theme', newTheme);
     updateThemeToggle(newTheme);
+    updateLogoImage(); // 主题切换时更新logo图片
 }
 
 // 更新主题切换状态