Merge pull request #210 from first19326/dev

修复了一些小问题
This commit is contained in:
底层用户 2023-11-03 09:10:57 +08:00 committed by GitHub
commit 6c58920f77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 10 deletions

View File

@ -17,7 +17,12 @@
</section> </section>
</div> </div>
<!-- 移动端菜单按钮 --> <!-- 移动端菜单按钮 -->
<Icon class="menu" size="24" @click="store.mobileOpenState = !store.mobileOpenState"> <Icon
class="menu"
size="24"
v-show="!store.backgroundShow"
@click="store.mobileOpenState = !store.mobileOpenState"
>
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" /> <component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
</Icon> </Icon>
<!-- 页脚 --> <!-- 页脚 -->
@ -178,7 +183,7 @@ onBeforeUnmount(() => {
.i-icon { .i-icon {
transform: translateY(2px); transform: translateY(2px);
} }
@media (min-width: 720px) { @media (min-width: 721px) {
display: none; display: none;
} }
} }

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="cover"> <div :class="store.backgroundShow ? 'cover show' : 'cover'">
<img <img
v-show="store.imgLoadStatus" v-show="store.imgLoadStatus"
class="bg" class="bg"
@ -99,6 +99,10 @@ onBeforeUnmount(() => {
transition: 0.25s; transition: 0.25s;
z-index: -1; z-index: -1;
&.show {
z-index: 1;
}
.bg { .bg {
position: absolute; position: absolute;
left: 0; left: 0;

View File

@ -42,7 +42,7 @@
</div> </div>
</div> </div>
<!-- 音乐列表弹窗 --> <!-- 音乐列表弹窗 -->
<Transition name="fade"> <Transition name="fade" mode="out-in">
<div class="music-list" v-show="musicListShow" @click="musicListShow = false"> <div class="music-list" v-show="musicListShow" @click="musicListShow = false">
<Transition name="zoom"> <Transition name="zoom">
<div class="list" v-show="musicListShow" @click.stop> <div class="list" v-show="musicListShow" @click.stop>
@ -281,12 +281,6 @@ watch(
} }
// //
.fade-enter-active {
animation: fade 0.3s ease-in-out;
}
.fade-leave-active {
animation: fade 0.3s ease-in-out reverse;
}
.zoom-enter-active { .zoom-enter-active {
animation: zoom 0.4s ease-in-out; animation: zoom 0.4s ease-in-out;
} }