diff --git a/index.html b/index.html index c0cf055..abe1418 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,15 @@
+ + + diff --git a/static/img/rili.png b/static/img/rili.png deleted file mode 100644 index aaba4d5..0000000 Binary files a/static/img/rili.png and /dev/null differ diff --git a/static/script.js b/static/script.js index 2781486..b4a3132 100644 --- a/static/script.js +++ b/static/script.js @@ -7,6 +7,7 @@ document.addEventListener("DOMContentLoaded", function () { fetch('./all.json') .then(response => response.json()) .then(data => { + allArticles = data.article_data; const articles = data.article_data.slice(start, start + batchSize); articles.forEach(article => { const card = document.createElement('div'); @@ -29,11 +30,12 @@ document.addEventListener("DOMContentLoaded", function () { author.appendChild(document.createTextNode(article.author)); card.appendChild(author); + author.onclick = () => { + showAuthorArticles(article.author, article.avatar, article.link); + }; + const date = document.createElement('div'); date.className = 'card-date'; - const dateImg = document.createElement('img'); - dateImg.src = './static/img/rili.png'; // 替换为实际的图标路径 - date.appendChild(dateImg); date.appendChild(document.createTextNode(article.created.substring(0, 10))); card.appendChild(date); @@ -54,9 +56,52 @@ document.addEventListener("DOMContentLoaded", function () { }); } + // 显示作者文章的函数 + function showAuthorArticles(author, avatar, link) { + const modal = document.getElementById('modal'); + const modalArticlesContainer = document.getElementById('modal-articles-container'); + const modalAuthorAvatar = document.getElementById('modal-author-avatar'); + const modalAuthorNameLink = document.getElementById('modal-author-name-link'); + + modalArticlesContainer.innerHTML = ''; // 清空之前的内容 + modalAuthorAvatar.src = avatar; + modalAuthorNameLink.innerText = author; + modalAuthorNameLink.href = new URL(link).origin; + + const authorArticles = allArticles.filter(article => article.author === author); + authorArticles.forEach(article => { + const articleDiv = document.createElement('div'); + articleDiv.className = 'modal-article'; + + const title = document.createElement('a'); + title.className = 'modal-article-title'; + title.innerText = article.title; + title.href = article.link; + title.target = '_blank'; + articleDiv.appendChild(title); + + const date = document.createElement('div'); + date.className = 'modal-article-date'; + date.innerText = article.created.substring(0, 10); + articleDiv.appendChild(date); + + modalArticlesContainer.appendChild(articleDiv); + }); + + modal.style.display = 'block'; + } + // 初始加载 loadMoreArticles(); // 加载更多按钮点击事件 document.getElementById('load-more-btn').addEventListener('click', loadMoreArticles); + + // 点击遮罩层关闭模态框 + window.onclick = function(event) { + const modal = document.getElementById('modal'); + if (event.target === modal) { + modal.style.display = 'none'; + } + }; }); diff --git a/static/styles.css b/static/styles.css index 7db17ee..ffcb077 100644 --- a/static/styles.css +++ b/static/styles.css @@ -10,6 +10,72 @@ body { min-height: 100vh; } +/* 模态框样式 */ +.modal { + display: none; /* 默认隐藏 */ + position: absolute; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); /* 模糊背景 */ + background-color: rgba(255, 255, 255, 0.5); /* 背景遮罩 */ +} + +.modal-content { + background-color: #fefefe; + margin: 50% auto; + padding: 20px; + border: 1px solid #888; + width: 320px; + max-width: 600px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +@media screen and (max-width: 400px) { + .modal-content { + width: 80%; + } + +} + +#modal-author-avatar { + display: block; + margin: 0 auto 10px; /* 垂直方向上自动居中，底部留出间距 */ + border-radius: 50%; /* 圆形图标 */ + width: 80px; + height: 80px; +} + +#modal-author-name-link { + display: block; + text-align: center; + font-size: 15px; + margin: 20px 0; + color: #007BFF; + text-decoration: none; +} + +#modal-author-name-link:hover { + text-decoration: underline; +} + +.modal-content hr { + margin: 20px 0; +} + +#modal-articles-container { + border-top:#007BFF solid 1px; + margin-top: 30px; + padding-top: 30px; +} + +/* 其他样式... */ + .articles-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); @@ -22,7 +88,7 @@ body { font-size: 15px; background-color: white; margin-top: 20px; - width: 50%; + width: 200px; border-radius: 20px; padding: 3px; border:#b5b5b5 solid 1px; @@ -31,7 +97,7 @@ body { #load-more-btn:hover { background-color: #0088ff; - width: 52%; + width: 300px; color: white; } @@ -40,7 +106,7 @@ body { background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - padding: 15px; + padding: 10px; position: relative; overflow: hidden; display: flex; @@ -51,6 +117,7 @@ body { .card-title { font-size: 17px; + cursor: pointer; margin-bottom: 10px; line-height: 1.5; max-height: 4.5em; /* 三行高度 */ @@ -72,20 +139,20 @@ body { .card-date { display: inline-block; font-size: 12px; - color: #888; - background-color: white; /* 白色背景 */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */ - border-radius: 15px; /* 圆角 */ + color: #313131; padding: 5px; /* 内边距 */ transition: box-shadow 0.2s; /* 过渡效果 */ } -.card-author:hover, -.card-date:hover { +.card-author:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时加深阴影 */ } .card-author { + cursor: pointer; + background-color: white; /* 白色背景 */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */ + border-radius: 15px; /* 圆角 */ display: flex; padding-right: 10px; width: fit-content; @@ -102,26 +169,20 @@ body { .card-date { position: absolute; z-index: 1; - bottom: 15px; - right: 15px; + bottom: 10px; + cursor: default; + right: 10px; display: flex; align-items: center; } -.card-date img { - width: 15px; - height: 15px; - border-radius: 20%; - margin-right: 5px; -} - .card-bg { z-index: 0; border-radius: 50%; position: absolute; - bottom: -30px; - right: -30px; - width: 150px; - height: 150px; + bottom: -15px; + right: -14px; + width: 120px; + height: 120px; opacity: 0.1; }