From 09afd2c6f86605453d91c42817460f6fe5db996d Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Sat, 4 Dec 2021 19:10:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=97=E8=A1=A8=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E8=AE=A1=E7=AE=97=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/App.vue                     |  8 +++++++-
 src/renderer/components/core/View.vue    | 26 +++++-------------------
 src/renderer/views/Download.vue          |  1 +
 src/renderer/views/Search.vue            |  1 +
 src/renderer/views/songList/SongList.vue |  4 ++--
 5 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 183ccd8f..87ba4079 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -3,7 +3,8 @@
   core-aside#left
   #right
     core-toolbar#toolbar
-    core-view#view
+    #view
+      core-view#view-container
     core-play-bar#player
   core-icons
   core-version-modal
@@ -133,9 +134,14 @@ body {
   flex: none;
 }
 #view {
+  position: relative;
   flex: auto;
+  display: flex;
   min-height: 0;
 }
+#view-container {
+  flex: auto;
+}
 
 each(@themes, {
   #root.@{value} {
diff --git a/src/renderer/components/core/View.vue b/src/renderer/components/core/View.vue
index 7870906c..03ff157a 100644
--- a/src/renderer/components/core/View.vue
+++ b/src/renderer/components/core/View.vue
@@ -1,28 +1,12 @@
 <template>
 <div :class="$style.view">
-  <router-view v-slot="{ Component }" v-if="mounted">
+  <router-view v-slot="{ Component }">
     <transition enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut">
       <component :is="Component" />
     </transition>
   </router-view>
 </div>
 </template>
-<script>
-import { ref, onMounted } from '@renderer/utils/vueTools'
-export default {
-  setup() {
-    const mounted = ref(false)
-
-    onMounted(() => {
-      mounted.value = true
-    })
-
-    return {
-      mounted,
-    }
-  },
-}
-</script>
 
 <style lang="less" module>
 @import '@renderer/assets/styles/layout.less';
@@ -30,10 +14,10 @@ export default {
 .view {
   position: relative;
   z-index: 1;
-  > * {
-    position: absolute;
-    width: 100%;
-  }
+  // > * {
+  //   position: absolute;
+  //   width: 100%;
+  // }
   // background: #fff;
   // overflow: hidden;
 }
diff --git a/src/renderer/views/Download.vue b/src/renderer/views/Download.vue
index ed4e45a4..8cab80bc 100644
--- a/src/renderer/views/Download.vue
+++ b/src/renderer/views/Download.vue
@@ -489,6 +489,7 @@ export default {
 @import '../assets/styles/layout.less';
 
 .download {
+  position: relative;
   overflow: hidden;
   height: 100%;
   display: flex;
diff --git a/src/renderer/views/Search.vue b/src/renderer/views/Search.vue
index c654f2de..9f0d649b 100644
--- a/src/renderer/views/Search.vue
+++ b/src/renderer/views/Search.vue
@@ -521,6 +521,7 @@ export default {
 @import '../assets/styles/layout.less';
 
 .search {
+  position: relative;
   overflow: hidden;
   height: 100%;
   display: flex;
diff --git a/src/renderer/views/songList/SongList.vue b/src/renderer/views/songList/SongList.vue
index 9b4c0c5b..24ed4e53 100644
--- a/src/renderer/views/songList/SongList.vue
+++ b/src/renderer/views/songList/SongList.vue
@@ -1,7 +1,8 @@
 <template lang="pug">
 div(:class="$style.container")
+  //- 歌曲列表页放在底层，在隐藏列表页时不会出现列表项的间隔线突兀感
   transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-    div(:class="$style.songListDetailContent" v-show="isVisibleListDetail")
+    div(:class="$style.songListDetailContent" v-if="isVisibleListDetail")
       div(:class="$style.songListHeader")
         div(:class="$style.songListHeaderLeft" :style="{ backgroundImage: 'url('+(selectListInfo.img || listDetail.info.img)+')' }")
           //- img(:src="listDetail.info.img || selectListInfo.img")
@@ -319,7 +320,6 @@ export default {
   width: 100%;
   display: flex;
   flex-flow: row nowrap;
-
 }
 .tab {
   flex: auto;