Merge pull request #210 from first19326/dev

修复了一些小问题

src/App.vue

@@ -17,7 +17,12 @@
         </section>
       </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" />
       </Icon>
       <!-- 页脚 -->
@@ -178,7 +183,7 @@ onBeforeUnmount(() => {
     .i-icon {
       transform: translateY(2px);
     }
-    @media (min-width: 720px) {
+    @media (min-width: 721px) {
       display: none;
     }
   }

src/components/Background.vue

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

src/components/Music.vue

@@ -42,7 +42,7 @@
     </div>
   </div>
   <!-- 音乐列表弹窗 -->
-  <Transition name="fade">
+  <Transition name="fade" mode="out-in">
     <div class="music-list" v-show="musicListShow" @click="musicListShow = false">
       <Transition name="zoom">
         <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 {
   animation: zoom 0.4s ease-in-out;
 }