fix: 优化卡片布局
- 分类标签移至右上角 - 卡片最小高度调整 - 网格宽度调整 - 文字右侧留出空间避免被按钮遮挡
This commit is contained in:
parent
4d36e80695
commit
27c725a8d4
@ -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}/>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user