showcase/wwwroot/showcase.css
yumoqing 1cce05a119 feat: showcase模块 - 产品展示平台(MVP)
- 4张数据表: posts/comments/likes/downloads
- 5种媒体类型: music/mtv/short_video/long_video/ktv
- 社交功能: 点赞(toggle)、评论(嵌套回复)
- KTV付费下载: 购买记录、下载计数
- 11个dspy API端点
- 3个CRUD管理界面(posts/comments/downloads)
- Feed流(类型筛选+分页)、作品详情(浏览计数+点赞状态)
- load_path.py RBAC权限注册
- 符合module/db-table/crud三规范
2026-06-11 14:46:02 +08:00

73 lines
1.8 KiB
CSS

/* Showcase platform styles */
.showcase-card {
background: var(--bricks-card-bg, #fff);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--bricks-border, #eee);
}
.showcase-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.showcase-card .thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
.showcase-card .info {
padding: 12px;
}
.showcase-card .title {
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.showcase-card .meta {
display: flex;
gap: 12px;
font-size: 12px;
color: #888;
}
.showcase-card .badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
margin-bottom: 6px;
}
.badge-music { background: #e8f5e9; color: #2e7d32; }
.badge-mtv { background: #e3f2fd; color: #1565c0; }
.badge-short_video { background: #fff3e0; color: #e65100; }
.badge-long_video { background: #fce4ec; color: #c62828; }
.badge-ktv { background: #f3e5f5; color: #6a1b9a; }
.comment-item {
padding: 12px 0;
border-bottom: 1px solid var(--bricks-border, #eee);
}
.comment-item .comment-header {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 6px;
}
.comment-item .comment-user { font-weight: 600; font-size: 13px; }
.comment-item .comment-time { font-size: 11px; color: #999; }
.comment-item .comment-body { font-size: 14px; line-height: 1.5; }
.comment-reply {
margin-left: 32px;
padding-left: 12px;
border-left: 2px solid var(--bricks-border, #eee);
}