From bcd746130a3158a7d354f9716ac2e0a3561d3289 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 21:10:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=98=AE=E8=A7=A3=E5=86=B3=E5=BC=B9?=
=?UTF-8?q?=E7=AA=97=E4=BD=8D=E7=BD=AE=E4=B8=8D=E5=AF=B9=E5=8A=B2=E7=9A=84?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 1 +
static/script.js | 17 +++++++--
static/styles.css | 92 ++++++++++++++++++++++++++++++++++++-----------
3 files changed, 88 insertions(+), 22 deletions(-)
diff --git a/index.html b/index.html
index abe1418..b346852 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
+
diff --git a/static/script.js b/static/script.js
index b4a3132..3c0cd33 100644
--- a/static/script.js
+++ b/static/script.js
@@ -82,13 +82,26 @@ document.addEventListener("DOMContentLoaded", function () {
const date = document.createElement('div');
date.className = 'modal-article-date';
- date.innerText = article.created.substring(0, 10);
+ date.innerText = "--" + article.created.substring(0, 10);
articleDiv.appendChild(date);
modalArticlesContainer.appendChild(articleDiv);
});
+ // 设置类名以触发显示动画
modal.style.display = 'block';
+ setTimeout(() => {
+ modal.classList.add('modal-open');
+ }, 10); // 确保显示动画触发
+ }
+
+ // 隐藏模态框的函数
+ function hideModal() {
+ const modal = document.getElementById('modal');
+ modal.classList.remove('modal-open');
+ modal.addEventListener('transitionend', () => {
+ modal.style.display = 'none';
+ }, { once: true });
}
// 初始加载
@@ -101,7 +114,7 @@ document.addEventListener("DOMContentLoaded", function () {
window.onclick = function(event) {
const modal = document.getElementById('modal');
if (event.target === modal) {
- modal.style.display = 'none';
+ hideModal();
}
};
});
diff --git a/static/styles.css b/static/styles.css
index ffcb077..b93cf70 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -12,28 +12,40 @@ body {
/* 模态框样式 */
.modal {
- display: none; /* 默认隐藏 */
- position: absolute;
- z-index: 1;
- left: 0;
+ position: fixed;
top: 0;
+ left: 0;
width: 100%;
height: 100%;
- overflow: hidden;
- backdrop-filter: blur(10px);
- -webkit-backdrop-filter: blur(10px); /* 模糊背景 */
- background-color: rgba(255, 255, 255, 0.5); /* 背景遮罩 */
+ background-color: rgba(255, 255, 255, 0.7);
+ backdrop-filter: blur(25px); /* 应用高斯模糊效果，可以根据需要调整模糊程度 */
+ -webkit-backdrop-filter: blur(25px); /* 兼容性前缀，适用于一些旧版本的浏览器 */
+ z-index: 999;
+ opacity: 0; /* 初始透明度 */
+ visibility: hidden; /* 初始不可见 */
+ transition: opacity 0.3s; /* 过渡效果，持续时间为 0.3 秒 */
+}
+
+.modal-open {
+ opacity: 1; /* 透明度变为完全不透明 */
+ visibility: visible; /* 可见 */
}
.modal-content {
- background-color: #fefefe;
- margin: 50% auto;
- padding: 20px;
- border: 1px solid #888;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
width: 320px;
- max-width: 600px;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ /* transform: translate(-50%, -50%); */
+ background-color: rgba(239, 250, 255, 0.7);
+ padding: 20px;
+ border: 1px solid #ccc;
+ z-index: 1000;
+ max-height: 90%;
+ overflow-y: auto;
+ border-radius: 20px;
+ transition: opacity 0.3s; /* 过渡效果，持续时间为 0.3 秒 */
}
@media screen and (max-width: 400px) {
@@ -55,11 +67,21 @@ body {
display: block;
text-align: center;
font-size: 15px;
- margin: 20px 0;
+ margin: 25px 0;
color: #007BFF;
text-decoration: none;
}
+.modal-article .modal-article-title {
+ font-size: 20px;
+ margin-bottom: 10px;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
#modal-author-name-link:hover {
text-decoration: underline;
}
@@ -69,11 +91,42 @@ body {
}
#modal-articles-container {
- border-top:#007BFF solid 1px;
- margin-top: 30px;
- padding-top: 30px;
+ border-top:#00244b double 2px;
+ margin-top: 20px;
+ padding-top: 10px;
}
+.modal-article {
+ display: flex;
+ flex-wrap: wrap; /* This property allows the elements to wrap onto multiple lines */
+ margin-bottom: 10px;
+ padding-bottom: 10px;
+ border-bottom: #007BFF dashed 1px;
+}
+
+.modal-article .modal-article-title {
+ color: #000000;
+ cursor: pointer;
+ text-decoration: none;
+ font-size: 18px;
+ height: 2.5em; /* 两行高度 */
+ width: 100%;
+ margin-bottom: 5px;
+}
+
+.modal-article .modal-article-title:hover {
+ color: #007BFF;
+ text-decoration: underline;
+}
+
+.modal-article .modal-article-date {
+ font-size: 12px;
+ width: 100%;
+ color: #313131;
+ padding: 5px;
+ cursor: default;
+ text-align: right; /* Add this line to align the text to the right */
+}
/* 其他样式... */
.articles-container {
@@ -137,7 +190,6 @@ body {
.card-author,
.card-date {
- display: inline-block;
font-size: 12px;
color: #313131;
padding: 5px; /* 内边距 */