diff --git a/src/layout/components/MusicFull.vue b/src/layout/components/MusicFull.vue index c15a201..7eeecc4 100644 --- a/src/layout/components/MusicFull.vue +++ b/src/layout/components/MusicFull.vue @@ -258,8 +258,6 @@ defineExpose({ background-color: transparent; span { - padding-right: 100px; - // display: inline-block; background-clip: text !important; -webkit-background-clip: text !important; } @@ -286,12 +284,16 @@ defineExpose({ .mobile { #drawer-target { - @apply flex-col p-4 pt-8; + @apply flex-col p-4 pt-8 justify-start; .music-img { display: none; } .music-lrc { height: calc(100vh - 260px) !important; + width: 100vw; + } + .music-lrc-text { + text-align: center; } } } diff --git a/src/views/list/index.vue b/src/views/list/index.vue index 70f80ae..9f74066 100644 --- a/src/views/list/index.vue +++ b/src/views/list/index.vue @@ -5,7 +5,7 @@ import { getListByCat, getListDetail, getRecommendList } from '@/api/list'; import MusicList from '@/components/MusicList.vue'; import type { IRecommendItem } from '@/type/list'; import type { IListDetail } from '@/type/listDetail'; -import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils'; +import { formatNumber, getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils'; defineOptions({ name: 'List', @@ -96,6 +96,10 @@ const handleScroll = (e: any) => { // 监听窗口大小变化,调整每行显示数量 const updateItemsPerRow = () => { const width = window.innerWidth; + if (isMobile.value) { + ITEMS_PER_ROW.value = 2; + return; + } if (width > 1800) ITEMS_PER_ROW.value = 8; else if (width > 1200) ITEMS_PER_ROW.value = 8; else if (width > 768) ITEMS_PER_ROW.value = 6; @@ -240,4 +244,10 @@ watch( .no-more { @apply text-center py-4 text-sm text-gray-500; } + +.mobile { + .recommend-list { + @apply px-4; + } +}