计协官网
This commit is contained in:
parent
e5909159fb
commit
28d607ec9f
149
index.html
149
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 mobileNav = document.getElementById('mobileNav');
|
||||
// 汉堡菜单功能
|
||||
const hamburger = document.getElementById('hamburger');
|
||||
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 => {
|
||||
link.addEventListener('click', function() {
|
||||
// 关闭移动菜单当点击菜单项
|
||||
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 themeToggle = document.getElementById('themeToggle');
|
||||
const mobileThemeToggle = document.getElementById('mobileThemeToggle');
|
||||
const closeBtn = document.getElementById('closeBtn');
|
||||
|
||||
// 检查本地存储中的主题偏好
|
||||
const currentTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.documentElement.setAttribute('data-theme', currentTheme);
|
||||
updateThemeToggle(currentTheme);
|
||||
closeBtn.addEventListener('click', function () {
|
||||
hamburger.classList.remove('open');
|
||||
mobileNav.classList.remove('open');
|
||||
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);
|
||||
mobileThemeToggle.addEventListener('change', toggleTheme);
|
||||
// 添加事件监听器
|
||||
themeToggle.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);
|
||||
</script>
|
||||
// 页面加载完成后获取最新动态
|
||||
document.addEventListener('DOMContentLoaded', fetchLatestNews);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user