refactor(ui): redesign playlist detail header
- Move back button to cover image area with updated styling - Remove sticky top bar for cleaner view - Add explicit container names in docker-compose.yml
This commit is contained in:
13
index.html
13
index.html
@@ -776,16 +776,17 @@
|
||||
if (selectedList) {
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-darker animate-[slideUp_0.2s_ease-out]">
|
||||
<div className="p-4 flex items-center gap-4 sticky top-0 bg-darker/80 backdrop-blur-md z-20 border-b border-white/5">
|
||||
<Icon name="arrow-left" onClick={() => setSelectedList(null)} />
|
||||
<h2 className="font-bold text-lg truncate">{selectedList.name}</h2>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto hide-scrollbar">
|
||||
<div className="w-full h-64 relative mb-4 overflow-hidden">
|
||||
<ImageWithFallback src={selectedList.cover || selectedList.pic} className="w-full h-full object-cover opacity-60 blur-sm scale-110" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-darker to-transparent"></div>
|
||||
<div className="absolute bottom-4 left-4 right-4">
|
||||
<div className="font-bold text-3xl shadow-black drop-shadow-lg mb-2">{selectedList.name}</div>
|
||||
<div className="absolute bottom-4 left-4 right-4 flex flex-col gap-2">
|
||||
{/* 返回按钮放置在标题上方,安全区域 */}
|
||||
<div onClick={() => setSelectedList(null)} className="self-start px-4 py-2 bg-white/20 backdrop-blur-md rounded-full text-sm font-bold flex items-center gap-2 cursor-pointer hover:bg-white/30 transition-colors mb-2 shadow-lg border border-white/10 active:scale-95">
|
||||
<Icon name="arrow-left" />
|
||||
<span>返回列表</span>
|
||||
</div>
|
||||
<div className="font-bold text-3xl shadow-black drop-shadow-lg leading-tight">{selectedList.name}</div>
|
||||
<div className="text-sm text-gray-300">更新于 {new Date().toLocaleDateString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user