/* ============ User Cards ============ */ .home-module__users-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--space-4, 16px); } .home-module__user-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--surface-1); transition: border-color .18s ease, transform .18s ease; } .home-module__user-card:hover { border-color: var(--color-line); transform: none; } .home-module__user-link { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--color-ink); } .home-module__user-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .home-module__user-name { font: 600 14px/1.2 var(--font-ui); } .home-module__user-bio { font-size: 12px; color: var(--color-ink-3); margin: 4px 0 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-module__user-stats { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--color-ink-2); } .home-module__user-stat { display: inline-flex; align-items: center; gap: 4px; } .home-module__user-stat i { font-size: 11px; color: var(--color-ink-3); } /* ============ More (Discover Categories) ============ */ .home-module__more-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--space-4, 16px); } .home-module__more-card { border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--surface-1); overflow: hidden; transition: border-color .18s ease, transform .18s ease; } .home-module__more-card:hover { border-color: var(--color-line); transform: none; } .home-module__more-link { display: block; text-decoration: none; color: inherit; } .home-module__more-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-fill-2); } .home-module__more-cover img { width: 100%; height: 100%; object-fit: cover; } .home-module__more-cover--placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--color-ink-3); } .home-module__more-body { padding: 12px; display: flex; flex-direction: column; gap: 2px; } .home-module__more-name { font: 600 14px/1.3 var(--font-ui); } .home-module__more-count { font-size: 12px; color: var(--color-ink-3); } .home-module__more-posts { list-style: none; margin: 0; padding: 0 12px 12px; } .home-module__more-posts li { border-top: 1px solid var(--color-line-light, rgba(0,0,0,.06)); } .home-module__more-posts a { display: block; padding: 6px 0; font-size: 13px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease; } .home-module__more-posts a:hover { color: var(--color-primary); } /* 响应式 */ @media (max-width: 767px) { .home-module__data-grid, .home-module__highlight-grid, .home-module__product-grid { grid-template-columns: 1fr !important; } .home-module__faq-grid { column-count: 1 !important; } .home-module__users-grid, .home-module__more-grid { grid-template-columns: 1fr 1fr !important; } }