调整首页榜单标签位置
This commit is contained in:
parent
20c1fc53d1
commit
1920c05f51
24
app/page.tsx
24
app/page.tsx
@ -2110,22 +2110,8 @@ export default function Home() {
|
||||
<span>{videoStatusMeta?.label || '预览生成中'}</span>
|
||||
</div>
|
||||
)}
|
||||
{/* 榜单角标和SPU型号 - 使用z-20确保在音频/视频覆盖层之上 */}
|
||||
{/* 型号标识 - 使用z-20确保在音频/视频覆盖层之上 */}
|
||||
<div className="absolute top-3 left-3 flex flex-col items-start gap-1.5 z-20">
|
||||
{rankingBadges.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{rankingBadges.map((badge) => (
|
||||
<span
|
||||
key={`card-badge-${material.id}-${badge.label}`}
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded-md border border-slate-200 bg-white/90 text-[11px] font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-200'
|
||||
)}
|
||||
>
|
||||
{badge.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* SPU型号 */}
|
||||
<div className="rounded-md border border-slate-200 bg-white/90 text-slate-800 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-100 px-2 py-1 text-xs font-medium">
|
||||
{material.productModel}
|
||||
@ -2177,6 +2163,14 @@ export default function Home() {
|
||||
|
||||
<div className="p-4 flex flex-col flex-1">
|
||||
<div className="flex items-center gap-1 mb-2 overflow-hidden whitespace-nowrap">
|
||||
{rankingBadges.length > 0 && rankingBadges.map((badge) => (
|
||||
<span
|
||||
key={`card-badge-${material.id}-${badge.label}`}
|
||||
className="shrink-0 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-[11px] font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
|
||||
>
|
||||
{badge.label}
|
||||
</span>
|
||||
))}
|
||||
{getMaterialTemplateLabel(material) && (
|
||||
<Tag
|
||||
size="xs"
|
||||
|
||||
@ -1045,7 +1045,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
||||
|
||||
证据:
|
||||
|
||||
- `app/page.tsx:400`:精品、下载榜、点赞榜使用多段渐变角标。
|
||||
- `app/page.tsx:400`:精品、下载榜、点赞榜仍作为素材卡片状态信息保留,但样式已收为信息区里的中性小标签。
|
||||
- `app/page.tsx`:排序方式已从大号胶囊按钮改为普通矩形按钮组。
|
||||
- `app/page.tsx`:首页素材类型筛选和筛选弹窗内选项已从胶囊按钮、hover 滑动显示数量和阴影状态,收为普通矩形按钮;数量默认稳定显示,不再依赖鼠标悬停。
|
||||
- `app/page.tsx`:首页“上传素材”主按钮已去掉硬编码靛蓝主按钮样式,改为跟随当前主题色的普通矩形主操作按钮。
|
||||
@ -1053,14 +1053,14 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
||||
- `app/page.tsx`:首页素材卡片已从大圆角、轻阴影和黑色半透明胶囊收为普通 `rounded-lg` 边框卡片、中性标签和弱化的素材型号标识。
|
||||
- `app/profile/page.tsx`:个人页“我的素材 / 我的点赞 / 浏览历史”卡片已从大圆角和黑色渐变覆盖层收为普通边框卡片和浅底信息条。
|
||||
- `components/RankingPanel.tsx`:浮动榜单面板已移除毛玻璃、重阴影、超大圆角和前三名金色卡片感,改为普通边框小面板。
|
||||
- `app/page.tsx`:榜单角标仍叠在素材封面上,但已从黑色高对比胶囊改为浅底中性标签,后续可继续评估是否移动到卡片信息区。
|
||||
- `app/page.tsx`:榜单/精品信息已从素材封面移到卡片信息区,并使用浅底中性小标签,避免长期遮挡素材图。
|
||||
- `app/page.tsx`、`components/MaterialActionButtons.tsx`:素材卡片悬浮点赞按钮已是矩形轻边框样式;公共素材操作按钮也从 `rounded-xl` 和蓝色下载进度条收为 `rounded-md` 与中性进度条。
|
||||
- `app/page.tsx`:首页空状态已从“快来上传第一个吧”改为“暂无素材,请上传素材”;列表底部已改为“加载更多素材 / 暂无更多素材”。
|
||||
|
||||
建议动作:
|
||||
|
||||
- 已完成第一轮:素材卡片改为轻边框、少阴影、不上浮,排序控件、筛选按钮和上传按钮改成普通按钮组。
|
||||
- 仍需继续:榜单/精品信息最好进一步移到卡片信息区或排序条件,不长期压在素材封面上。
|
||||
- 已完成:榜单/精品信息已从素材封面移到卡片信息区,不再长期压在素材图上。
|
||||
- 已完成:工作状态文案改为“加载中”“加载更多素材”“暂无更多素材”等朴素表达。
|
||||
|
||||
### P2-09 上传、编辑、预览弹窗过圆、过亮、说明过多
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user