From b7ecaef6a2fb87c3059a0181540fa999e162ada6 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sat, 24 May 2025 15:22:20 +1000
Subject: [PATCH] =?UTF-8?q?style(AlbumDetail):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化了移动端布局，使图片和文本在不同屏幕尺寸下显示更合理。调整了样式以提升用户体验。
---
 src/pages/AlbumDetail.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/AlbumDetail.vue b/src/pages/AlbumDetail.vue
index 387d901..22bbb90 100644
--- a/src/pages/AlbumDetail.vue
+++ b/src/pages/AlbumDetail.vue
@@ -27,13 +27,13 @@ function artistsOrganize(list: string[]) {
 </script>
 
 <template>
-	<div class="px-4 md:px-8 flex gap-8">
-		<div class="mx-auto w-48 md:mx-0 md:w-72">
-			<div class="sticky top-[6.625rem] flex flex-col gap-8">
-				<div class="border border-[#5b5b5b] rounded-md overflow-hidden shadow-2xl bg-neutral-800 sticky">
+	<div class="px-4 md:px-8 flex gap-8 flex-col md:flex-row select-none">
+		<div class="mx-auto md:mx-0 md:w-72">
+			<div class="md:sticky md:top-[6.625rem] flex flex-col gap-8">
+				<div class="border border-[#5b5b5b] rounded-md overflow-hidden shadow-2xl bg-neutral-800 sticky w-48 mx-auto md:w-72">
 					<img :src="album?.coverUrl" class="md:w-72 md:h-72 w-48 h-48 object-contain" />
 				</div>
-				<div class="flex flex-col gap-2">
+				<div class="flex flex-col gap-2 text-center md:text-left">
 					<div class="text-white text-2xl font-semibold">{{ album?.name }}</div>
 					<div class="text-sky-200 text-xl">{{ artistsOrganize(album?.artistes ?? []) }}</div>
 					<div class="text-white/50 text-sm">{{ album?.intro }}</div>