收敛首页筛选标签组件样式
This commit is contained in:
parent
eda68b6c90
commit
da8580659c
@ -154,7 +154,7 @@ function FieldTagGroup({
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cn(
|
||||
'flex flex-wrap gap-2 transition-all duration-200',
|
||||
'flex flex-wrap gap-2 transition-colors duration-200',
|
||||
// 响应式:小屏幕时横向滚动
|
||||
'sm:flex-wrap',
|
||||
'max-sm:flex-nowrap max-sm:overflow-x-auto max-sm:pb-2 max-sm:-mx-2 max-sm:px-2',
|
||||
@ -202,7 +202,7 @@ function FieldTagGroup({
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className={cn(
|
||||
'px-3 py-1 text-xs font-medium rounded-full border transition-all duration-200',
|
||||
'px-3 py-1 text-xs font-medium rounded-md border transition-colors duration-200',
|
||||
'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400',
|
||||
'border-slate-200 dark:border-slate-700',
|
||||
'hover:bg-slate-200 dark:hover:bg-slate-700',
|
||||
@ -246,7 +246,7 @@ export default function HomeFilterTags({
|
||||
<div className="h-4 w-20 bg-slate-200 dark:bg-slate-700 rounded" />
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5].map((j) => (
|
||||
<div key={j} className="h-7 w-16 bg-slate-200 dark:bg-slate-700 rounded-full" />
|
||||
<div key={j} className="h-7 w-16 bg-slate-200 dark:bg-slate-700 rounded-md" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1048,6 +1048,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
||||
- `app/page.tsx:400`:精品、下载榜、点赞榜仍作为素材卡片状态信息保留,但样式已收为信息区里的中性小标签。
|
||||
- `app/page.tsx`:排序方式已从大号胶囊按钮改为普通矩形按钮组。
|
||||
- `app/page.tsx`:首页素材类型筛选和筛选弹窗内选项已从胶囊按钮、hover 滑动显示数量和阴影状态,收为普通矩形按钮;数量默认稳定显示,不再依赖鼠标悬停。
|
||||
- `components/HomeFilterTags.tsx`:筛选标签组件剩余的展开按钮和加载骨架已从胶囊圆角、`transition-all` 收为普通 `rounded-md` 和颜色过渡,避免后续复用时把胶囊样式带回首页。
|
||||
- `app/page.tsx`:首页“上传素材”主按钮已去掉硬编码靛蓝主按钮样式,改为跟随当前主题色的普通矩形主操作按钮。
|
||||
- `app/page.tsx`:首页音频素材卡片已从大圆形播放按钮和圆形频谱背景,收为小图标、文件名、普通进度条和矩形播放按钮。
|
||||
- `app/page.tsx`:首页素材卡片已从大圆角、轻阴影和黑色半透明胶囊收为普通 `rounded-lg` 边框卡片、中性标签和弱化的素材型号标识。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user