fix: 优化卡片布局

- 分类标签移至右上角
- 卡片最小高度调整
- 网格宽度调整
- 文字右侧留出空间避免被按钮遮挡
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

View File

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

View File

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