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-tilt: 0deg;
--card-delay: 0ms; --card-delay: 0ms;
display: inline-block;
width: 100%;
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--card-border); border: 1px solid var(--card-border);
border-radius: 12px; border-radius: 12px;

16
app/pages/index/index.vue

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

Loading…
Cancel
Save