🐞 fix: 修复抽屉zindex 修复一些样式问题

closes  #37 #38
This commit is contained in:
alger
2025-01-15 00:26:42 +08:00
parent c6427aa3e1
commit 072025a543
7 changed files with 14 additions and 7 deletions
+3
View File
@@ -22,6 +22,7 @@ declare module 'vue' {
NEmpty: typeof import('naive-ui')['NEmpty'] NEmpty: typeof import('naive-ui')['NEmpty']
NForm: typeof import('naive-ui')['NForm'] NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem'] NFormItem: typeof import('naive-ui')['NFormItem']
NIcon: typeof import('naive-ui')['NIcon']
NImage: typeof import('naive-ui')['NImage'] NImage: typeof import('naive-ui')['NImage']
NInput: typeof import('naive-ui')['NInput'] NInput: typeof import('naive-ui')['NInput']
NInputNumber: typeof import('naive-ui')['NInputNumber'] NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -39,6 +40,8 @@ declare module 'vue' {
NTabPane: typeof import('naive-ui')['NTabPane'] NTabPane: typeof import('naive-ui')['NTabPane']
NTabs: typeof import('naive-ui')['NTabs'] NTabs: typeof import('naive-ui')['NTabs']
NTag: typeof import('naive-ui')['NTag'] NTag: typeof import('naive-ui')['NTag']
NTooltip: typeof import('naive-ui')['NTooltip']
NVirtualList: typeof import('naive-ui')['NVirtualList']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
} }
+4 -2
View File
@@ -7,7 +7,7 @@
mask-closable mask-closable
:style="{ backgroundColor: 'transparent' }" :style="{ backgroundColor: 'transparent' }"
:to="`#layout-main`" :to="`#layout-main`"
:z-index="9998" :z-index="zIndex"
@mask-click="close" @mask-click="close"
> >
<div class="music-page"> <div class="music-page">
@@ -89,6 +89,7 @@ const props = withDefaults(
defineProps<{ defineProps<{
show: boolean; show: boolean;
name: string; name: string;
zIndex?: number;
songList: any[]; songList: any[];
loading?: boolean; loading?: boolean;
listInfo?: { listInfo?: {
@@ -99,7 +100,8 @@ const props = withDefaults(
}>(), }>(),
{ {
loading: false, loading: false,
cover: true cover: true,
zIndex: 9996
} }
); );
@@ -59,6 +59,7 @@
v-for="album in albums" v-for="album in albums"
:key="album.id" :key="album.id"
shape="square" shape="square"
:z-index="9998"
:item="{ :item="{
id: album.id, id: album.id,
picUrl: album.picUrl, picUrl: album.picUrl,
@@ -28,6 +28,7 @@
:song-list="songList" :song-list="songList"
:list-info="listInfo" :list-info="listInfo"
:cover="false" :cover="false"
:z-index="zIndex"
/> />
<mv-player <mv-player
v-if="item.type === 'mv'" v-if="item.type === 'mv'"
@@ -52,6 +53,7 @@ import MusicList from '../MusicList.vue';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
shape?: 'square' | 'rectangle'; shape?: 'square' | 'rectangle';
zIndex?: number;
item: { item: {
picUrl: string; picUrl: string;
name: string; name: string;
+2 -2
View File
@@ -328,11 +328,11 @@ const artists = computed(() => {
} }
&-like { &-like {
@apply mr-2 cursor-pointer ml-4; @apply mr-2 cursor-pointer ml-4 transition-all;
} }
.like-active { .like-active {
@apply text-red-500; @apply text-red-500 dark:text-red-500;
} }
&-play { &-play {
+1 -1
View File
@@ -395,7 +395,7 @@ const handleArtistClick = (id: number) => {
&-play { &-play {
@apply flex justify-center items-center w-20 h-12 rounded-full mx-4 transition text-gray-500; @apply flex justify-center items-center w-20 h-12 rounded-full mx-4 transition text-gray-500;
@apply bg-gray-100 bg-opacity-60 hover:bg-gray-200; @apply bg-gray-100 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 hover:bg-gray-200;
} }
} }
+1 -2
View File
@@ -207,7 +207,6 @@ watch(
// 页面挂载时检查登录状态 // 页面挂载时检查登录状态
onMounted(() => { onMounted(() => {
checkLoginStatus(); checkLoginStatus();
loadPage();
}); });
// 展示歌单 // 展示歌单
@@ -275,7 +274,7 @@ const handlePlay = () => {
.record-list { .record-list {
@apply rounded-2xl; @apply rounded-2xl;
@apply bg-light dark:bg-black; @apply bg-light dark:bg-black;
height: calc(100% - 3.75rem); height: calc(100% - 100px);
.record-item { .record-item {
@apply flex items-center px-4; @apply flex items-center px-4;