Browse Source

feat: 更新 IdeaCard 组件样式,调整卡片宽度和显示方式;优化首页卡片网格布局为瀑布流

acas
npmrun 2 weeks ago
parent
commit
3b10fbd69f
  1. 2
      app/components/index/IdeaCard.vue
  2. 16
      app/pages/index/index.vue

2
app/components/index/IdeaCard.vue

@ -77,6 +77,8 @@ const formattedDate = computed(() => {
--card-tilt: 0deg;
--card-delay: 0ms;
display: inline-block;
width: 100%;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;

16
app/pages/index/index.vue

@ -348,11 +348,15 @@ async function loadMore() {
);
}
/* ── Cards Grid ── */
/* ── Cards Grid (Waterfall / Masonry) ── */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
column-count: 3;
column-gap: 20px;
}
.cards-grid > * {
break-inside: avoid;
margin-bottom: 20px;
}
/* ── Empty State ── */
@ -493,8 +497,8 @@ async function loadMore() {
}
.cards-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
column-count: 2;
column-gap: 16px;
}
}
</style>

Loading…
Cancel
Save