holytreasure/www.skxjx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

计协官网

Browse Source
This commit is contained in:
skxjx2024. 2025-05-03 23:18:01 +08:00
parent e5909159fb
commit 28d607ec9f
1 changed files with 234 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

361
index.html
View File

@ -132,6 +132,11 @@
color: var(--secondary-color); color: var(--secondary-color);
} }
.logo img {
width: auto;
height: 50px;
}
/* 汉堡菜单按钮 */ /* 汉堡菜单按钮 */
.hamburger { .hamburger {
display: none; display: none;
@ -162,7 +167,8 @@
top: 0; top: 0;
} }
.hamburger span:nth-child(2), .hamburger span:nth-child(3) { .hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
top: 9px; top: 9px;
} }
@ -229,11 +235,11 @@
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked+.slider {
background-color: var(--secondary-color); background-color: var(--secondary-color);
} }
input:checked + .slider:before { input:checked+.slider:before {
transform: translateX(30px); transform: translateX(30px);
} }
@ -561,7 +567,7 @@
left: 3.5px; left: 3.5px;
} }
input:checked + .slider:before { input:checked+.slider:before {
transform: translateX(25px); transform: translateX(25px);
} }
@ -569,6 +575,22 @@
font-size: 12px; 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> </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head> </head>
@ -578,7 +600,9 @@
<header> <header>
<div class="container"> <div class="container">
<nav> <nav>
<div class="logo">石科信计算机协会</div> <div class="logo">
<img id="logoImage" src="images/skx-w.png" alt="石科信计算机协会">
</div>
<button class="hamburger" id="hamburger"> <button class="hamburger" id="hamburger">
<span></span> <span></span>
<span></span> <span></span>
@ -607,6 +631,9 @@
<!-- 移动端导航菜单 --> <!-- 移动端导航菜单 -->
<div class="mobile-nav" id="mobileNav"> <div class="mobile-nav" id="mobileNav">
<button class="close-btn" id="closeBtn">
<i class="fas fa-times"></i>
</button>
<ul class="mobile-nav-links"> <ul class="mobile-nav-links">
<li><a href="/">首页</a></li> <li><a href="/">首页</a></li>
<li><a href="/about">协会介绍</a></li> <li><a href="/about">协会介绍</a></li>
@ -694,180 +721,206 @@
</footer> </footer>
<script> <script>
// 平滑滚动 // 获取主题切换开关元素
document.querySelectorAll('a[href^="#"]').forEach(anchor => { const themeToggle = document.getElementById('themeToggle');
anchor.addEventListener('click', function (e) { const mobileThemeToggle = document.getElementById('mobileThemeToggle');
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({ // 获取 logo 图片元素
behavior: 'smooth' 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 () { window.addEventListener('scroll', function () {
const header = document.querySelector('header'); const header = document.querySelector('header');
if (window.scrollY > 50) { if (window.scrollY > 50) {
header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)'; header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
} else { } else {
header.style.boxShadow = 'none'; 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'); this.classList.toggle('open');
mobileNav.classList.toggle('open'); mobileNav.classList.toggle('open');
// 切换body的overflow以防止页面滚动 // 切换body的overflow以防止页面滚动
if (mobileNav.classList.contains('open')) { if (mobileNav.classList.contains('open')) {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
} else { } else {
document.body.style.overflow = ''; 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'); hamburger.classList.remove('open');
mobileNav.classList.remove('open'); mobileNav.classList.remove('open');
document.body.style.overflow = ''; 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';
const currentTheme = document.documentElement.getAttribute('data-theme'); document.documentElement.setAttribute('data-theme', currentTheme);
const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; updateThemeToggle(currentTheme);
updateLogoImage(); // 初始化时也更新logo图片
document.documentElement.setAttribute('data-theme', newTheme); // 切换主题
localStorage.setItem('theme', newTheme); function toggleTheme() {
updateThemeToggle(newTheme); 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}`);
} }
// 更新主题切换状态 const result = await response.json();
function updateThemeToggle(theme) {
const isLight = theme === 'light'; // 检查API返回的数据结构
themeToggle.checked = isLight; if (result.code !== 0 || !result.data || !result.data.articles) {
mobileThemeToggle.checked = isLight; throw new Error('API返回数据格式不正确');
} }
// 添加事件监听器 renderNews(result.data.articles);
themeToggle.addEventListener('change', toggleTheme); } catch (error) {
mobileThemeToggle.addEventListener('change', toggleTheme); 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() { function renderNews(articles) {
const newsContainer = document.getElementById('newsContainer'); const newsContainer = document.getElementById('newsContainer');
newsContainer.innerHTML = '';
try { if (!articles || articles.length === 0) {
// 构造API请求URL newsContainer.innerHTML = '<p class="no-news">暂无最新动态</p>';
const apiUrl = new URL('https://news.skxjx.holytreasure.space/'); return;
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()); articles.forEach(article => {
const newsCard = document.createElement('div');
newsCard.className = 'news-card';
if (!response.ok) { // 格式化日期 (从 "2021-10-11 08:04:11" 转为 "2021年10月11日")
throw new Error(`HTTP错误! 状态码: ${response.status}`); const formattedDate = formatDate(article.date);
}
const result = await response.json(); // 构造文章卡片
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>
`;
// 检查API返回的数据结构 newsContainer.appendChild(newsCard);
if (result.code !== 0 || !result.data || !result.data.articles) { });
throw new Error('API返回数据格式不正确'); }
}
renderNews(result.data.articles); // 辅助函数：格式化日期
} catch (error) { function formatDate(dateString) {
console.error('获取最新动态失败:', error); if (!dateString) return '未知日期';
newsContainer.innerHTML = `
<div class="error-message"> try {
<i class="fas fa-exclamation-triangle"></i> const date = new Date(dateString);
<p>加载动态失败: ${error.message}</p> if (isNaN(date.getTime())) {
<p>请稍后刷新页面重试</p> return dateString; // 如果无法解析，返回原始字符串
</div>
`;
}
} }
// 渲染文章列表 return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
function renderNews(articles) { } catch (e) {
const newsContainer = document.getElementById('newsContainer'); return dateString;
newsContainer.innerHTML = ''; }
}
if (!articles || articles.length === 0) { // 页面加载完成后获取最新动态
newsContainer.innerHTML = '<p class="no-news">暂无最新动态</p>'; document.addEventListener('DOMContentLoaded', fetchLatestNews);
return; </script>
}
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>
</body> </body>
</html> </html>