steven/Navi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化卡片布局

Browse Source 
- 分类标签移至右上角
- 卡片最小高度调整
- 网格宽度调整
- 文字右侧留出空间避免被按钮遮挡
This commit is contained in:
小龙 2026-04-06 15:01:06 +00:00
parent 4d36e80695
commit 27c725a8d4
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.jsx
View File

@ -279,12 +279,12 @@ function SiteCard({ site, onClick, onToggleFav, onEdit, onDelete }) {
return ( return (
<div className="site-card" onClick={handleCardClick}> <div className="site-card" onClick={handleCardClick}>
{site.category && <span className="card-category">{site.category.name}</span>}
<div className="card-icon"> <div className="card-icon">
{site.icon && site.icon.startsWith('http') ? <img src={site.icon} alt=""/> : <Icon name="globe" size={26}/>} {site.icon && site.icon.startsWith('http') ? <img src={site.icon} alt=""/> : <Icon name="globe" size={26}/>}
</div> </div>
<div className="card-name">{site.name}</div> <div className="card-name">{site.name}</div>
{site.description && <div className="card-desc">{site.description}</div>} {site.description && <div className="card-desc">{site.description}</div>}
{site.category && <span className="card-category">{site.category.name}</span>}
<div className="card-bottom-actions"> <div className="card-bottom-actions">
<button className={`card-favorite ${site.is_favorite ? 'active' : ''}`} onClick={handleFav} title="收藏"> <button className={`card-favorite ${site.is_favorite ? 'active' : ''}`} onClick={handleFav} title="收藏">
<Icon name="star" size={15}/> <Icon name="star" size={15}/>

21
frontend/src/index.css
View File

@ -231,7 +231,7 @@ body {
/* 网站网格 */ /* 网站网格 */
.website-grid { .website-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px; gap: 20px;
} }
@ -240,7 +240,8 @@ body {
position: relative; position: relative;
background: white; background: white;
border-radius: 16px; border-radius: 16px;
padding: 24px 20px; padding: 20px;
min-height: 140px;
cursor: pointer; cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
@ -281,6 +282,8 @@ body {
gap: 6px; gap: 6px;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
opacity: 0;
transition: opacity 0.2s ease;
} }
.site-card:hover .external-icon { .site-card:hover .external-icon {
@ -322,24 +325,22 @@ body {
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 4px; margin-bottom: 4px;
white-space: nowrap; padding-right: 80px;
overflow: hidden;
text-overflow: ellipsis;
} }
.card-desc { .card-desc {
font-size: 12px; font-size: 12px;
color: #888; color: #888;
white-space: nowrap; padding-right: 80px;
overflow: hidden;
text-overflow: ellipsis;
} }
.card-category { .card-category {
position: absolute;
top: 12px;
right: 12px;
display: inline-block; display: inline-block;
margin-top: 12px;
padding: 4px 10px; padding: 4px 10px;
background: linear-gradient(135deg, #667eea10, #764ba210); background: linear-gradient(135deg, #667eea20, #764ba220);
border-radius: 6px; border-radius: 6px;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;