From 4f7d066376a75cdae9ce7768d62280e42168eb9a Mon Sep 17 00:00:00 2001
From: "algerkc@qq.com" <algerkc@qq.com>
Date: Thu, 14 Dec 2023 17:56:55 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor(style):=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=B8=BA=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/AppLayout.vue   | 13 +++++++------
 src/views/list/index.vue   | 12 +++++-------
 src/views/search/index.vue | 12 ++++--------
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 33ffa1d..e30798a 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -8,7 +8,7 @@
                     <!-- 搜索栏 -->
                     <search-bar />
                     <!-- 主页面路由 -->
-                    <n-layout class="main-content bg-black" :native-scrollbar="false">
+                    <div class="main-content bg-black" :native-scrollbar="false">
                         <n-message-provider>
                             <router-view class="main-page" v-slot="{ Component }">
                                 <!-- <keep-alive>
@@ -19,7 +19,7 @@
                                 <component :is="Component" />
                             </router-view>
                         </n-message-provider>
-                    </n-layout>
+                    </div>
                 </div>
             </div>
             <!-- 底部音乐播放 -->
@@ -56,18 +56,19 @@ const menus = store.state.menus;
 
 .layout-main {
     @apply bg-black rounded-lg  text-white shadow-xl flex-col relative;
-    height: 900px;
-    width: 1500px;
+    height: 100%;
+    width: 100%;
     overflow: hidden;
-    min-width: 1500px;
     .menu {
         width: 90px;
     }
     .main {
         @apply pt-6 pr-6 flex-1 box-border;
+        height: 100vh;
         &-content {
             @apply rounded-2xl;
-            height: 834px;
+            height: calc(100vh - 60px);
+            margin-bottom: 90px;
         }
         &-page {
             margin: 20px 0;
diff --git a/src/views/list/index.vue b/src/views/list/index.vue
index 5fc120b..74d585f 100644
--- a/src/views/list/index.vue
+++ b/src/views/list/index.vue
@@ -152,7 +152,7 @@ const handlePlay = (item: any) => {
 
 <style lang="scss" scoped>
 .list-page {
-  position: relative;
+  @apply relative h-full;
 }
 
 .musicPage-enter-active {
@@ -164,15 +164,13 @@ const handlePlay = (item: any) => {
 }
 
 .recommend {
-  width: 100%;
-  height: 800px;
-  background-color: #000000;
+  @apply w-full h-full;
   &-title {
     @apply text-lg font-bold text-white py-4;
   }
 
   &-list {
-    @apply flex flex-wrap;
+    @apply flex flex-wrap justify-between;
     padding-bottom: 100px;
   }
   &-item {
@@ -220,10 +218,10 @@ const handlePlay = (item: any) => {
 .music {
   &-page {
     width: 100%;
-    height: 734px;
+    height: 70%;
     position: absolute;
     background-color: #000000f0;
-    top: 100px;
+    bottom: 0;
     left: 0;
     border-radius: 30px 30px 0 0;
     animation-duration: 300ms;
diff --git a/src/views/search/index.vue b/src/views/search/index.vue
index da1dce1..f89d733 100644
--- a/src/views/search/index.vue
+++ b/src/views/search/index.vue
@@ -34,7 +34,7 @@
                     v-for="(item, index) in searchDetail?.result.songs"
                     :key="item.id"
                     :class="setAnimationClass('animate__bounceInRight')"
-                    :style="setAnimationDelay(index, 100)"
+                    :style="setAnimationDelay(index, 50)"
                 >
                     <SongItem :item="item" />
                 </div>
@@ -116,19 +116,15 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.search {
-    height: 750px;
-    background-color: #333;
-}
 .search-page {
-    @apply flex;
+    @apply flex h-full;
 }
 .hot-search {
     @apply mt-3 mr-4 rounded-xl  flex-1 overflow-hidden;
-    height: 740px;
     background-color: #0d0d0d;
     animation-duration: 0.2s;
     min-width: 400px;
+    height: 100%;
     &-item {
         @apply px-4 py-3 text-lg hover:bg-gray-700 rounded-xl cursor-pointer;
         &-count {
@@ -142,8 +138,8 @@ watch(
 
 .search-list {
     @apply mt-3 flex-1 rounded-xl;
-    height: 740px;
     background-color: #0d0d0d;
+    height: 100%;
 }
 
 .title {