wzj/AIDaohang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化搜索结果样式

Browse Source
This commit is contained in:
wzj 2025-07-11 11:01:48 +08:00
parent d19398fe7e
commit 0aaf8b5269
2 changed files with 77 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
templates/icontest.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesome 图标示例</title>
<!-- 引入Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 可选：设置图标样式 */
.icon {
font-size: 24px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Font Awesome 图标示例</h1>
<div>
<i class="fa-solid fa-undo icon"></i> 撤销
</div>
<div>
<i class="fa-solid fa-undo-alt icon"></i> 撤销(替代)
</div>
<div>
<i class="fa-solid fa-unlink icon"></i> 取消链接
</div>
<div>
<i class="fa-solid fa-wrench icon"></i> 扳手
</div>
<div>
<i class="fa-brands fa-500px icon"></i> 500px
</div>
<div>
<i class="fa-brands fa-accessible-icon icon"></i> 无障碍图标
</div>
<div>
<i class="fa-brands fa-accusoft icon"></i> Accusoft
</div>
<div>
<i class="fa-brands fa-acquisitions-incorporated icon"></i> Acquisitions Inc
</div>
</body>
</html>

114
templates/index.html
View File

@ -161,43 +161,83 @@
} }
/* 新增的搜索框样式 */ /* 新增的搜索框样式 */
.search-container { /* 修改后的搜索框和结果样式 */
margin: 20px auto; .search-container {
max-width: 600px; margin: 20px auto;
position: relative; max-width: 500px; /* 缩小搜索框最大宽度 */
width: 100%; position: relative;
padding: 0 15px; width: 100%;
} padding: 0 15px;
.search-input { }
width: 100%;
padding: 12px 20px; .search-input {
border-radius: 25px; width: 100%;
border: 1px solid #ddd; padding: 12px 20px;
font-size: 16px; border-radius: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); border: 1px solid #ddd;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; font-size: 16px;
} box-shadow: 0 2px 10px rgba(0,0,0,0.1);
.search-results { transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
position: absolute; }
width: calc(100% - 30px);
background: white; .search-results {
border-radius: 0 0 10px 10px; position: absolute;
box-shadow: 0 5px 15px rgba(0,0,0,0.1); width: calc(95% - 40px); /* 修改为与搜索框底边宽度一致 */
z-index: 100; left: 33px; /* 确保与搜索框对齐 */
max-height: 300px; background: white;
overflow-y: auto; border-radius: 0 0 10px 10px;
display: none; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: background-color 0.15s ease-in-out; z-index: 100;
} max-height: 300px;
.search-result-item { overflow-y: auto;
padding: 10px 20px; display: none;
border-bottom: 1px solid #eee; transition: background-color 0.15s ease-in-out;
cursor: pointer; scrollbar-width: thin;
transition: background-color 0.15s ease-in-out; scrollbar-color: var(--primary-color) transparent;
} margin-top: 3px;
.search-result-item:hover { }
background: #f5f5f5;
} /* 自定义滚动条样式 */
.search-results::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.search-results::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
.search-results::-webkit-scrollbar-thumb {
background-color: var(--primary-color);
border-radius: 3px;
}
.search-result-item {
padding: 10px 20px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background-color 0.15s ease-in-out;
}
.search-result-item:hover {
background: #f5f5f5;
}
/* 暗黑模式下的搜索结果样式 */
body.dark-theme .search-results {
background-color: #1e1e1e;
color: #e0e0e0;
}
body.dark-theme .search-result-item {
border-bottom-color: #333;
color: #e0e0e0;
}
body.dark-theme .search-result-item:hover {
background-color: #2a2a2a;
}
/* 右下角按钮组 */ /* 右下角按钮组 */
.floating-buttons { .floating-buttons {