音乐弹窗大屏下显示左右布局
This commit is contained in:
mtvpls
+73
-71
@@ -1922,86 +1922,88 @@ export default function MusicPage() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="w-full max-w-2xl h-[90vh] md:h-auto max-h-[90vh] bg-zinc-900/95 rounded-2xl overflow-hidden border border-white/10 shadow-2xl flex flex-col"
|
className="relative w-full max-w-6xl h-[90vh] bg-zinc-900/95 rounded-2xl overflow-hidden border border-white/10 shadow-2xl flex flex-col"
|
||||||
onClick={() => setShowVolumeSlider(false)}
|
onClick={() => setShowVolumeSlider(false)}
|
||||||
>
|
>
|
||||||
{/* Header */}
|
<button
|
||||||
<div className="relative h-32 md:h-48 bg-gradient-to-b from-zinc-800 to-zinc-900 shrink-0">
|
onClick={() => setShowLyrics(false)}
|
||||||
{currentSong.pic && (
|
className="absolute top-2 right-2 md:top-4 md:right-4 z-10 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
|
||||||
<div className="absolute inset-0">
|
>
|
||||||
<img
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
src={currentSong.pic}
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
alt={currentSong.name}
|
</svg>
|
||||||
className="w-full h-full object-cover opacity-30 blur-xl"
|
</button>
|
||||||
/>
|
<div className="flex flex-1 min-h-0 flex-col md:flex-row">
|
||||||
</div>
|
{/* Cover / Meta */}
|
||||||
)}
|
<div className="relative h-32 md:h-auto md:w-[320px] lg:w-[360px] xl:w-[420px] bg-gradient-to-b from-zinc-800 to-zinc-900 shrink-0">
|
||||||
<div className="relative h-full flex flex-col items-center justify-center p-4 md:p-6">
|
{currentSong.pic && (
|
||||||
<button
|
<div className="absolute inset-0">
|
||||||
onClick={() => setShowLyrics(false)}
|
|
||||||
className="absolute top-2 right-2 md:top-4 md:right-4 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div className="w-16 h-16 md:w-24 md:h-24 rounded-xl overflow-hidden shadow-2xl mb-2 md:mb-4">
|
|
||||||
{currentSong.pic ? (
|
|
||||||
<img
|
<img
|
||||||
src={currentSong.pic}
|
src={currentSong.pic}
|
||||||
alt={currentSong.name}
|
alt={currentSong.name}
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover opacity-30 blur-xl"
|
||||||
/>
|
/>
|
||||||
) : (
|
</div>
|
||||||
<div className="w-full h-full bg-zinc-800 flex items-center justify-center">
|
)}
|
||||||
<svg className="w-8 h-8 md:w-12 md:h-12 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
|
<div className="relative h-full flex flex-col items-center justify-center p-4 md:p-6 lg:p-8">
|
||||||
<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
|
<div className="w-16 h-16 md:w-40 md:h-40 lg:w-56 lg:h-56 rounded-xl lg:rounded-2xl overflow-hidden shadow-2xl mb-2 md:mb-4 lg:mb-6">
|
||||||
</svg>
|
{currentSong.pic ? (
|
||||||
</div>
|
<img
|
||||||
)}
|
src={currentSong.pic}
|
||||||
|
alt={currentSong.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-zinc-800 flex items-center justify-center">
|
||||||
|
<svg className="w-8 h-8 md:w-16 md:h-16 lg:w-20 lg:h-20 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-base md:text-lg lg:text-2xl font-bold text-white text-center mb-1 line-clamp-2">{currentSong.name}</h2>
|
||||||
|
<p className="text-xs md:text-sm lg:text-base text-zinc-400 line-clamp-1 text-center">{currentSong.artist}</p>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-base md:text-xl font-bold text-white text-center mb-1 line-clamp-1">{currentSong.name}</h2>
|
|
||||||
<p className="text-xs md:text-sm text-zinc-400 line-clamp-1">{currentSong.artist}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Lyrics Content */}
|
{/* Lyrics Content */}
|
||||||
<div ref={lyricsContainerRef} className="flex-1 overflow-y-auto p-4 md:p-6">
|
<div ref={lyricsContainerRef} className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
|
||||||
{lyrics.length > 0 ? (
|
{lyrics.length > 0 ? (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4 md:space-y-5">
|
||||||
{lyrics.map((line, index) => (
|
{lyrics.map((line, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
data-index={index}
|
data-index={index}
|
||||||
className={`text-center transition-all duration-300 ${
|
className={`text-center transition-all duration-300 ${
|
||||||
index === currentLyricIndex
|
index === currentLyricIndex
|
||||||
? 'text-white text-lg font-bold scale-110'
|
? 'text-white text-lg md:text-xl lg:text-2xl font-bold scale-110'
|
||||||
: index === currentLyricIndex - 1 || index === currentLyricIndex + 1
|
: index === currentLyricIndex - 1 || index === currentLyricIndex + 1
|
||||||
? 'text-zinc-400 text-base'
|
? 'text-zinc-400 text-base md:text-lg'
|
||||||
: 'text-zinc-600 text-sm'
|
: 'text-zinc-600 text-sm md:text-base'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div>{line.text}</div>
|
<div>{line.text}</div>
|
||||||
{line.translation && (
|
{line.translation && (
|
||||||
<div
|
<div
|
||||||
className={`mt-1 ${
|
className={`mt-1 ${
|
||||||
index === currentLyricIndex
|
index === currentLyricIndex
|
||||||
? 'text-zinc-300 text-sm md:text-base font-normal'
|
? 'text-zinc-300 text-sm md:text-base lg:text-lg font-normal'
|
||||||
: 'text-zinc-500 text-xs md:text-sm font-normal'
|
: 'text-zinc-500 text-xs md:text-sm lg:text-base font-normal'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{line.translation}
|
{line.translation}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center space-y-4">
|
<div className="text-center space-y-4 pt-10 md:pt-16 lg:pt-20">
|
||||||
<p className="text-zinc-500 text-sm">暂无歌词</p>
|
<p className="text-zinc-500 text-sm md:text-base">暂无歌词</p>
|
||||||
<p className="text-zinc-600 text-xs">纯音乐或歌词获取失败</p>
|
<p className="text-zinc-600 text-xs md:text-sm">纯音乐或歌词获取失败</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mini Player Controls */}
|
{/* Mini Player Controls */}
|
||||||
|
|||||||
Reference in New Issue
Block a user