From 20f4d61975be38dd925fdb5309429d84380f4b2f Mon Sep 17 00:00:00 2001
From: qing <1776177662@qq.com>
Date: Wed, 22 Jul 2026 19:29:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/public/dnfs.html  | 99 +++++++++++++++++++++++++++++-----------
 static/public/js/dnfs.js |  9 ++--
 2 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/static/public/dnfs.html b/static/public/dnfs.html
index 0b4bdd0..60e5bfd 100644
--- a/static/public/dnfs.html
+++ b/static/public/dnfs.html
@@ -23,37 +23,82 @@
 				margin-right: 0px;
 				background-color: #cfcfcf;
 			}
+
+			/* by qing */
+			body {
+				min-height: 100vh;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background: #c2ccd0;
+				font-family: system-ui, -apple-system, "Segoe UI", Roboto,sans-serif;
+				padding: 1rem;
+			}
+
+			.box {
+				width: 90%;
+			}
+
+			.card {
+				background-color: #eedeb0;
+				border: 1px solid #000000;
+				border-radius: 1.125rem;
+				padding: 1.5rem 1.25rem;
+				box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
+				/*max-width: 480px;*/
+				width: 90%;
+				color: #4d3e2b;
+				transition: box-shadow 0.2s, border-color 0.2s;
+				overflow-wrap: break-word;
+			}
+
+			.card:hover {
+				border-color: #c7b38a;
+				box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03);
+			}
+
+			/* 移动端微调 */
+			@media (max-width: 480px) {
+				body {
+					padding: 0.8rem;
+				}
+
+				.card {
+					padding: 1.2rem, 1rem;
+					border-radius: 1rem;
+					border-width: 1px;
+				}
+			}
+
+			/* 极小屏 (宽度 < 360px)  */
+			@media (max-width: 360px) {
+				.card {
+					padding: 1rem 0.8rem;
+					border-radius: 0.9rem;
+				}
+			}
+
 		</style>
 	</head>
 	<body>
-		<center>
-		<!-- 文章主标题 -->
-		<h1><div id="article-title">title</div></h1>
+		<div class="box">
+			<h1><div id="article-title">title</div></h1>
 
-		<!-- 文章详情 -->
-		<div>
-			发布时间：<span id="publish-time">2026-1-1</span>
+			</center>
+			<div id="article-content">hello</div>
+			<hr>
+			<div class="recommend-list" id="recommend-list"></div>
+			<br>
+			<div class="card">
+				<h3>节点操作</h3>
+				<label>新增节点</label><input id="input-note-title"></input><br>
+				<label>节点内容</label><textarea id="input-note-content"></textarea><br>
+				<button id="input-note-submit">提交</button>
+				<button id="input-note-clear">重置</button>
+			</div>
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.0/markdown-it.min.js"></script>
+			<script src="/js/validation.js"></script>
+			<script src="/js/dnfs.js"></script>
 		</div>
-		<div>
-			浏览：<span id="visit-count">999</span>
-			点赞：<span id="like-count">999</span>
-			分享：<span id="share-count">999</span>
-		</div>
-		</center>
-		<!-- 文章正文-->
-		<div id="article-content">hello</div>
-		<hr>
-		<div class="recommend-list" id="recommend-list"></div>
-		<br>
-		<h3>节点操作</h3>
-		<div>
-			<label>新增节点</label><input id="input-note-title"></input><br>
-			<label>节点内容</label><textarea id="input-note-content"></textarea><br>
-			<button id="input-note-submit">提交</button>
-			<button id="input-note-clear">重置</button>
-		</div>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.0/markdown-it.min.js"></script>
-		<script src="/js/validation.js"></script>
-		<script src="/js/dnfs.js"></script>
 	</body>
 </html>
diff --git a/static/public/js/dnfs.js b/static/public/js/dnfs.js
index 8f3f8d4..392efa8 100644
--- a/static/public/js/dnfs.js
+++ b/static/public/js/dnfs.js
@@ -144,19 +144,22 @@ function load_notes(main_node) {
 	}
 	for (i in main_node) {
 		item = main_node[i]
+		var card = document.createElement('div'); 
+		card.className = "card";
 		var ttl = document.createElement('center');
 		ttl.addEventListener('click', function(event) {
 			var id = Number(item.id)
 			stack.push(id)
 			getNode(token, id).then(load_notes)
 		});
-		var ttl1 =document.createElement('h1');
+		var ttl1 =document.createElement('h3');
 		ttl1.textContent = item.title
 		ttl.appendChild(ttl1)
-		recommend_list.appendChild(ttl)
+		card.appendChild(ttl)
 		var ctt = document.createElement('p');
 		renderMarkdown(ctt, item.content);
-		recommend_list.appendChild(ctt)
+		card.appendChild(ctt)
+		recommend_list.appendChild(card)
 		recommend_list.appendChild(document.createElement('br'))
 		recommend_list.appendChild(document.createElement('hr'))
 	}