lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-18 03:17:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 优化页面效果

Browse Source
This commit is contained in:
alger
2024-12-09 22:58:57 +08:00
parent df74dafbc5
commit bb99049991
4 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.d.ts
Vendored
-1
View File
@@ -35,7 +35,6 @@ declare module 'vue' {
NSwitch: typeof import('naive-ui')['NSwitch'] NSwitch: typeof import('naive-ui')['NSwitch']
NTooltip: typeof import('naive-ui')['NTooltip'] NTooltip: typeof import('naive-ui')['NTooltip']
NVirtualList: typeof import('naive-ui')['NVirtualList'] NVirtualList: typeof import('naive-ui')['NVirtualList']
NVirtualListualList: typeof import('naive-ui')['NVirtualListualList']
PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default'] PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default']
PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default'] PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default']
PlaylistType: typeof import('./src/components/PlaylistType.vue')['default'] PlaylistType: typeof import('./src/components/PlaylistType.vue')['default']
src/components/MusicList.vue
+4 -3
View File
@@ -1,7 +1,7 @@
<template> <template>
<n-drawer <n-drawer
:show="show" :show="show"
:height="isMobile ? '100vh' : '70vh'" :height="isMobile ? '100vh' : '80vh'"
placement="bottom" placement="bottom"
block-scroll block-scroll
mask-closable mask-closable
@@ -28,6 +28,7 @@
class="cover-img" class="cover-img"
preview-disabled preview-disabled
:class="setAnimationClass('animate__fadeIn')" :class="setAnimationClass('animate__fadeIn')"
object-fit="cover"
/> />
</div> </div>
<div class="music-detail"> <div class="music-detail">
@@ -52,7 +53,7 @@
v-for="(item, index) in displayedSongs" v-for="(item, index) in displayedSongs"
:key="item.id" :key="item.id"
class="double-item" class="double-item"
:class="setAnimationClass('animate__bounceInDown')" :class="setAnimationClass('animate__bounceInUp')"
:style="getItemAnimationDelay(index)" :style="getItemAnimationDelay(index)"
> >
<song-item :item="formatDetail(item)" @play="handlePlay" /> <song-item :item="formatDetail(item)" @play="handlePlay" />
@@ -220,7 +221,7 @@ watch(
} }
&-info { &-info {
@apply w-[400px] flex-shrink-0 pr-8 flex flex-col; @apply w-[25%] flex-shrink-0 pr-8 flex flex-col;
.music-cover { .music-cover {
@apply w-full aspect-square rounded-lg overflow-hidden mb-4; @apply w-full aspect-square rounded-lg overflow-hidden mb-4;
src/views/list/index.vue
+1 -1
View File
@@ -168,7 +168,7 @@ watch(
&-list { &-list {
@apply grid gap-x-8 gap-y-6 pb-28 pr-4; @apply grid gap-x-8 gap-y-6 pb-28 pr-4;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
} }
&-item { &-item {
@apply flex flex-col; @apply flex flex-col;
src/views/mv/index.vue
+1 -1
View File
@@ -163,7 +163,7 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
&-content { &-content {
@apply grid gap-4 pb-28 mt-2 pr-4; @apply grid gap-4 pb-28 mt-2 pr-4;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
} }
.mv-item { .mv-item {