修改动画, 修改搜索

src/views/list/index.vue

@@ -122,21 +122,23 @@ const formatDetail = computed(() => (detail: any) => {
       </div>
     </n-layout>
 
-    <div class="music-page" v-show="showMusic" :class="musicFullClass">
-      <i class="iconfont icon-icon_error music-close" @click="closeMusic()"></i>
-      <div class="music-title">{{ recommendItem?.name }}</div>
-      <!-- 歌单歌曲列表 -->
-      <n-layout class="music-list" :native-scrollbar="false">
-        <div
-          v-for="(item, index) in listDetail?.playlist.tracks"
-          :key="item.id"
-          :class="setAnimationClass('animate__bounceInUp')"
-          :style="setAnimationDelay(index, 50)"
-        >
-          <SongItem :item="formatDetail(item)" />
-        </div>
-      </n-layout>
-    </div>
+    <transition name="musicPage">
+      <div class="music-page" v-if="showMusic">
+        <i class="iconfont icon-icon_error music-close" @click="closeMusic()"></i>
+        <div class="music-title">{{ recommendItem?.name }}</div>
+        <!-- 歌单歌曲列表 -->
+        <n-layout class="music-list" :native-scrollbar="false">
+          <div
+            v-for="(item, index) in listDetail?.playlist.tracks"
+            :key="item.id"
+            :class="setAnimationClass('animate__bounceInUp')"
+            :style="setAnimationDelay(index, 50)"
+          >
+            <SongItem :item="formatDetail(item)" />
+          </div>
+        </n-layout>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -145,6 +147,14 @@ const formatDetail = computed(() => (detail: any) => {
   position: relative;
 }
 
+.musicPage-enter-active {
+  animation: fadeInUp 0.8s ease-in-out;
+}
+
+.musicPage-leave-active {
+  animation: fadeOutDown 0.8s ease-in-out;
+}
+
 .recommend {
   width: 100%;
   height: 800px;

src/views/login/index.vue

@@ -117,7 +117,7 @@ const loginPhone = async () => {
   width: 350px;
   height: 550px;
   @apply rounded-2xl rounded-b-none bg-cover bg-no-repeat relative overflow-hidden;
-  background-image: url(https://z3.ax1x.com/2021/09/30/4IMyUx.jpg);
+  background-image: url(http://tva4.sinaimg.cn/large/006opRgRgy1gw8nf6no7uj30rs15n0x7.jpg);
   background-color: #383838;
   box-shadow: inset 0px 0px 20px 5px #0000005e;
 

src/views/search/index.vue

@@ -26,11 +26,12 @@
             class="search-list"
             :class="setAnimationClass('animate__fadeInUp')"
             :native-scrollbar="false"
+            @scroll="searchScrolling"
         >
             <div class="title">{{ hotKeyword }}</div>
             <template v-if="searchDetail">
                 <div
-                    v-for="(item, index) in searchDetail?.result.song.songs"
+                    v-for="(item, index) in searchDetail?.result.songs"
                     :key="item.id"
                     :class="setAnimationClass('animate__bounceInRight')"
                     :style="setAnimationDelay(index, 100)"
@@ -55,7 +56,7 @@ import SongItem from "@/components/common/SongItem.vue";
 
 const route = useRoute();
 const router = useRouter();
-const searchDetail = ref<ISearchDetail>();
+const searchDetail = ref<any>();
 
 // 热搜列表
 const hotSearchData = ref<IHotSearch>();
@@ -64,6 +65,10 @@ const loadHotSearch = async () => {
     hotSearchData.value = data;
 };
 
+function searchScrolling(e: any) {
+    console.log(e);
+}
+
 
 onMounted(() => {
     loadHotSearch();
@@ -88,14 +93,15 @@ const loadSearch = async (keyword: any) => {
     searchDetail.value = undefined;
     if (!keyword) return;
     const { data } = await getSearch(keyword);
-    const songs = data.result.song.songs;
+
+    const songs = data.result.songs;
+
     // songs map 替换属性
     songs.map((item: any) => {
         item.picUrl = item.al.picUrl;
         item.song = item;
         item.artists = item.ar;
     });
-    data.result.song.songs = songs;
     searchDetail.value = data;
 };
 

src/views/user/index.vue

@@ -133,26 +133,34 @@ const musicFullClass = computed(() => {
         </div>
       </n-layout>
     </div>
-
-    <div class="music-page" v-show="isShowList" :class="musicFullClass">
-      <i class="iconfont icon-icon_error music-close" @click="isShowList = false"></i>
-      <div class="music-title">{{ list?.name }}</div>
-      <!-- 歌单歌曲列表 -->
-      <n-layout class="music-list" :native-scrollbar="false">
-        <div
-          v-for="(item, index) in list?.tracks"
-          :key="item.id"
-          :class="setAnimationClass('animate__bounceInUp')"
-          :style="setAnimationDelay(index, 100)"
-        >
-          <SongItem :item="formatDetail(item)" />
-        </div>
-      </n-layout>
-    </div>
+    <transition name="musicPage">
+      <div class="music-page" v-if="isShowList">
+        <i class="iconfont icon-icon_error music-close" @click="isShowList = false"></i>
+        <div class="music-title">{{ list?.name }}</div>
+        <!-- 歌单歌曲列表 -->
+        <n-layout class="music-list" :native-scrollbar="false">
+          <div
+            v-for="(item, index) in list?.tracks"
+            :key="item.id"
+            :class="setAnimationClass('animate__bounceInUp')"
+            :style="setAnimationDelay(index, 100)"
+          >
+            <SongItem :item="formatDetail(item)" />
+          </div>
+        </n-layout>
+      </div>
+    </transition>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.musicPage-enter-active {
+  animation: fadeInUp 0.8s ease-in-out;
+}
+
+.musicPage-leave-active {
+  animation: fadeOutDown 0.8s ease-in-out;
+}
 .user-page {
   @apply flex;
   .left {