Skip to content

Commit 7eb1d33

Browse files
panhyuanpanhyuan
committed
feature: 调整样式
1 parent 6bf7373 commit 7eb1d33

File tree

2 files changed

+144
-25
lines changed

2 files changed

+144
-25
lines changed

‎css/index.css

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,16 @@ header {
200200

201201
.links {
202202
display: grid;
203-
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
204-
gap: 15px;
203+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
204+
gap: 12px;
205+
max-height: 300px;
206+
overflow-y: hidden;
207+
transition: max-height 0.3s ease;
208+
}
209+
210+
.links.expanded {
211+
max-height: none;
212+
overflow-y: visible;
205213
}
206214

207215
.link-item {
@@ -215,6 +223,8 @@ header {
215223
text-align: center;
216224
transition: all 0.3s ease;
217225
border: 1px solid rgba(0, 0, 0, 0.05);
226+
position: relative;
227+
overflow: hidden;
218228
}
219229

220230
.link-item:hover {
@@ -223,6 +233,54 @@ header {
223233
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
224234
}
225235

236+
.link-item::before {
237+
content: '';
238+
position: absolute;
239+
top: 0;
240+
left: -100%;
241+
width: 100%;
242+
height: 100%;
243+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
244+
transition: left 0.5s ease;
245+
}
246+
247+
.link-item:hover::before {
248+
left: 100%;
249+
}
250+
251+
.expand-btn {
252+
display: block;
253+
width: 100%;
254+
padding: 12px;
255+
background: rgba(0, 0, 0, 0.05);
256+
border: 1px solid rgba(0, 0, 0, 0.1);
257+
border-radius: 12px;
258+
color: #666;
259+
font-weight: 500;
260+
text-align: center;
261+
cursor: pointer;
262+
transition: all 0.3s ease;
263+
margin-top: 15px;
264+
font-size: 14px;
265+
}
266+
267+
.expand-btn:hover {
268+
background: rgba(0, 0, 0, 0.1);
269+
color: #333;
270+
transform: translateY(-2px);
271+
}
272+
273+
.expand-btn.collapse {
274+
background: rgba(0, 0, 0, 0.08);
275+
color: #333;
276+
}
277+
278+
.category-footer {
279+
margin-top: 20px;
280+
padding-top: 15px;
281+
border-top: 1px solid rgba(0, 0, 0, 0.1);
282+
}
283+
226284
.stats {
227285
display: flex;
228286
justify-content: center;

‎js/index.js

Lines changed: 84 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,3 @@
1-
function searchSites () {
2-
const query = document.getElementById('searchInput').value.toLowerCase();
3-
const categories = document.querySelectorAll('.category');
4-
5-
categories.forEach(category => {
6-
const links = category.querySelectorAll('.link-item');
7-
let hasVisibleLinks = false;
8-
9-
links.forEach(link => {
10-
const text = link.textContent.toLowerCase();
11-
if (text.includes(query)) {
12-
link.style.display = 'block';
13-
hasVisibleLinks = true;
14-
} else {
15-
link.style.display = query === '' ? 'block' : 'none';
16-
if (query === '') hasVisibleLinks = true;
17-
}
18-
});
19-
20-
category.style.display = hasVisibleLinks ? 'block' : 'none';
21-
});
22-
}
231

242
function filterCategory (category) {
253
const categories = document.querySelectorAll('.category');
@@ -71,9 +49,10 @@ function updateCategoryCounts() {
7149
}
7250
}
7351

74-
// 页面加载完成后更新计数
52+
// 页面加载完成后更新计数和初始化扩展按钮
7553
document.addEventListener('DOMContentLoaded', function() {
7654
updateCategoryCounts();
55+
initExpandButtons();
7756
});
7857

7958
// 搜索框实时搜索
@@ -99,3 +78,85 @@ document.addEventListener('DOMContentLoaded', function () {
9978
observer.observe(category);
10079
});
10180
});
81+
82+
// 初始化扩展按钮
83+
function initExpandButtons() {
84+
const categories = document.querySelectorAll('.category');
85+
86+
categories.forEach(category => {
87+
const links = category.querySelector('.links');
88+
const linkItems = links.querySelectorAll('.link-item');
89+
90+
// 如果链接数量超过阈值，添加扩展按钮
91+
if (linkItems.length > 8) {
92+
const expandBtn = document.createElement('button');
93+
expandBtn.className = 'expand-btn';
94+
expandBtn.textContent = `展开全部 (${linkItems.length})`;
95+
expandBtn.onclick = function() {
96+
toggleExpand(category, expandBtn);
97+
};
98+
99+
const footer = document.createElement('div');
100+
footer.className = 'category-footer';
101+
footer.appendChild(expandBtn);
102+
103+
category.appendChild(footer);
104+
}
105+
});
106+
}
107+
108+
// 切换扩展/折叠状态
109+
function toggleExpand(category, button) {
110+
const links = category.querySelector('.links');
111+
const isExpanded = links.classList.contains('expanded');
112+
113+
if (isExpanded) {
114+
links.classList.remove('expanded');
115+
button.textContent = `展开全部 (${links.querySelectorAll('.link-item').length})`;
116+
button.classList.remove('collapse');
117+
118+
// 平滑滚动到分类顶部
119+
category.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
120+
} else {
121+
links.classList.add('expanded');
122+
button.textContent = '收起';
123+
button.classList.add('collapse');
124+
}
125+
}
126+
127+
// 增强搜索功能，支持扩展状态
128+
function searchSites () {
129+
const query = document.getElementById('searchInput').value.toLowerCase();
130+
const categories = document.querySelectorAll('.category');
131+
132+
categories.forEach(category => {
133+
const links = category.querySelectorAll('.link-item');
134+
let hasVisibleLinks = false;
135+
136+
links.forEach(link => {
137+
const text = link.textContent.toLowerCase();
138+
if (text.includes(query)) {
139+
link.style.display = 'block';
140+
hasVisibleLinks = true;
141+
} else {
142+
link.style.display = query === '' ? 'block' : 'none';
143+
if (query === '') hasVisibleLinks = true;
144+
}
145+
});
146+
147+
category.style.display = hasVisibleLinks ? 'block' : 'none';
148+
149+
// 搜索时自动展开分类
150+
if (hasVisibleLinks && query !== '') {
151+
const linksContainer = category.querySelector('.links');
152+
if (linksContainer && !linksContainer.classList.contains('expanded')) {
153+
linksContainer.classList.add('expanded');
154+
const expandBtn = category.querySelector('.expand-btn');
155+
if (expandBtn) {
156+
expandBtn.textContent = '收起';
157+
expandBtn.classList.add('collapse');
158+
}
159+
}
160+
}
161+
});
162+
}

0 commit comments

Comments
 (0)