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 20:39:32 +08:00
parent a1b1d861ac
commit f24e8232f8
3 changed files with 86 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/list/index.vue
+8 -6
View File
@@ -11,7 +11,7 @@ defineOptions({
name: 'List',
});
const TOTAL_ITEMS = 40; // 每页数量
const TOTAL_ITEMS = 42; // 每页数量
const recommendList = ref<any[]>([]);
const showMusic = ref(false);
@@ -162,12 +162,12 @@ watch(
.recommend {
@apply w-full h-full bg-none;
&-title {
@apply text-lg font-bold text-white pb-4;
@apply text-lg font-bold text-white pb-2;
}
&-list {
@apply grid gap-x-8 gap-y-6 pb-28 pr-4;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
&-item {
@apply flex flex-col;
@@ -218,10 +218,12 @@ watch(
}
.mobile {
.recommend-title {
@apply text-xl font-bold px-4;
}
.recommend-list {
@apply px-4;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
@apply px-4 gap-4;
}
}
</style>
src/views/mv/index.vue
+7 -5
View File
@@ -58,7 +58,7 @@ const initLoading = ref(false);
const loadingMore = ref(false);
const currentIndex = ref(0);
const offset = ref(0);
const limit = ref(30);
const limit = ref(28);
const hasMore = ref(true);
const getItemAnimationDelay = (index: number) => {
@@ -158,12 +158,12 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
@apply relative h-full w-full;
&-title {
@apply text-xl font-bold;
@apply text-xl font-bold pb-2;
}
&-content {
@apply grid gap-4 pb-28 mt-2 pr-4;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.mv-item {
@@ -217,10 +217,12 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
}
.mobile {
.mv-list-title {
@apply text-xl font-bold px-4;
}
.mv-list-content {
@apply px-4;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}