From 9dd43b1ac6e1e36fb2ba8510c735425a4fb89293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=B3=E7=A5=9E?= <3162475700@qq.com> Date: Thu, 11 Jul 2024 15:30:10 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=AE=E5=AE=9E=E7=8E=B0=E5=A4=B4?= =?UTF-8?q?=E5=83=8F=E6=8C=89=E9=92=AE=E8=8E=B7=E5=8F=96=E5=85=A8=E9=83=A8?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=EF=BC=88=E6=9C=AA=E5=AE=8C=E6=88=90=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 9 ++++ static/img/rili.png | Bin 951 -> 0 bytes static/script.js | 51 +++++++++++++++++++-- static/styles.css | 105 ++++++++++++++++++++++++++++++++++---------- 4 files changed, 140 insertions(+), 25 deletions(-) delete mode 100644 static/img/rili.png 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 aaba4d57c8586feb4719eee19d40a188db42ae9b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 951 zcmV;o14#UdP)Px&aY;l$RCr$PTU~P6Fc8)n4$zVwfIPrVPZ78YJVFkUJ$Vs55=nOo>2WV*z zK)fBXu(pIhBB7Mlkii(r&Hb})ycRX+2bPc5QbQwg96ZjbaoqdmsHYEUfqNh@B z9ks1{Ocuz_rpN?9oc?|suH^s}_U%+8I7W3Z#&*7pePnY|D~?!~8NdLL!111?jjcm< z+m+L~EQTBa%wAmTUX;mvHxB>>OZ6V|sTt4$&@!M+fmQ=5i=fH26T(>btyZ}Ugs>9Lh`EvZuEITuTF7r9c{8K}lPOS65?zj&tl7*CqMj3L@o_ynXKH;0D70 zUi7O_KR5u&XOY#TA504Hq8|Yno18(4G$)7@@R9q$qyR7aE|23H&j6p%4?+Xj2)R)H zU_OU^N5An5C~bWeUU`Gu1z7s~IErtq2Kjf9)N~iAu_CB)%!L3pIt5H`klF&G0$O=Z&R1^M(HOzr6Qm$2Pls7`cKKyy8%0~Y zyVu)KB5Rw&eyJVB*8+^6i&-}a!dns@*E&b)S^yaP5s*O(KtRFr;_A&a Z;2%{!4{k@QHAl4 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; }