/* 社区面板样式 */ .community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 8px 4px; align-items: start; width: 100%; box-sizing: border-box; } .cm-card { background: #fff; border: 1px solid var(--panel-border); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; position: relative; cursor: pointer; } .cm-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 32px rgba(59, 130, 246, 0.15); border-color: var(--accent); z-index: 10; } .cm-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 0 2px transparent; border-radius: 16px; transition: all 0.3s; pointer-events: none; } .cm-card:hover::after { box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.2); } .cm-img-wrap { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); overflow: hidden; position: relative; border-bottom: 1px solid var(--panel-border); display: flex; justify-content: center; align-items: center; padding: 8px; transition: all 0.3s; } .cm-card:hover .cm-img-wrap { background: #fff; } .cm-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.4s ease; } .cm-card:hover .cm-img-wrap img { transform: scale(1.05); } .cm-info { padding: 14px; flex: 1; display: flex; flex-direction: column; background: #fff; } .cm-title { font-size: 14px; font-weight: 900; color: var(--text); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; transition: color 0.3s; } .cm-card:hover .cm-title { color: var(--accent); } .cm-stats { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12px; color: var(--text-mute); font-weight: 800; } .cm-stat-item { display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s; padding: 4px 8px; background: #f1f5f9; border-radius: 12px; } .cm-stat-item:hover { color: var(--danger); background: #fee2e2; transform: scale(1.05); } .cm-actions { display: flex; gap: 8px; margin-top: auto; } .cm-btn { flex: 1; padding: 8px 0; font-size: 12px; font-weight: 800; border-radius: 10px; transition: all 0.2s; } .cm-badge { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: white; padding: 4px 10px; border-radius: 14px; font-size: 10px; font-weight: 900; backdrop-filter: blur(4px); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); z-index: 2; } .cm-badge.private { background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%); box-shadow: 0 4px 10px rgba(100, 116, 139, 0.3); }