mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-24 16:27:23 +08:00
🔧 chore:改进播放器组件的加载状态显示, 优化 GD音乐解析逻辑,增加超时处理,调整音源列表
This commit is contained in:
@@ -34,13 +34,18 @@
|
||||
:class="{ 'only-cover': config.hideLyrics }"
|
||||
:style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
|
||||
>
|
||||
<n-image
|
||||
ref="PicImgRef"
|
||||
:src="getImgUrl(playMusic?.picUrl, '500y500')"
|
||||
class="img"
|
||||
lazy
|
||||
preview-disabled
|
||||
/>
|
||||
<div class="img-container relative">
|
||||
<n-image
|
||||
ref="PicImgRef"
|
||||
:src="getImgUrl(playMusic?.picUrl, '500y500')"
|
||||
class="img"
|
||||
lazy
|
||||
preview-disabled
|
||||
/>
|
||||
<div v-if="playMusic?.playLoading" class="loading-overlay">
|
||||
<i class="ri-loader-4-line loading-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="music-info">
|
||||
<div class="music-content-name">{{ playMusic.name }}</div>
|
||||
<div class="music-content-singer">
|
||||
@@ -549,10 +554,14 @@ defineExpose({
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
|
||||
.img {
|
||||
.img-container {
|
||||
@apply w-[50vh] h-[50vh] mb-8;
|
||||
}
|
||||
|
||||
.img {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
@apply text-center w-[600px];
|
||||
|
||||
@@ -568,6 +577,10 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
|
||||
.img-container {
|
||||
@apply relative w-full h-full;
|
||||
}
|
||||
|
||||
.img {
|
||||
@apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
|
||||
}
|
||||
@@ -763,4 +776,25 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
@apply absolute inset-0 flex items-center justify-center rounded-xl;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 48px;
|
||||
color: white;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user