修改动画 完善搜索

src/components/RecommendSinger.vue

@@ -17,7 +17,7 @@
                     class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"
                 >{{ item.musicSize }}首</div>
                 <div class="recommend-singer-item-info z-10">
-                    <div class="recommend-singer-item-info-play">
+                    <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
                         <i class="iconfont icon-playfill text-xl"></i>
                     </div>
                     <div class="ml-4">
@@ -35,6 +35,7 @@ import { setBackgroundImg, setAnimationDelay, setAnimationClass } from "@/utils"
 import { onMounted, ref } from "vue";
 import { getHotSinger } from "@/api/home";
 import type { IHotSinger } from "@/type/singer";
+import router from "@/router";
 
 // 歌手信息
 const hotSingerData = ref<IHotSinger>();
@@ -48,6 +49,17 @@ const loadSingerList = async () => {
 onMounted(() => {
     loadSingerList();
 });
+
+
+const toSearchSinger = (keyword: string) => {
+    router.push({
+        path: "/search",
+        query: {
+            keyword: keyword,
+        },
+    });
+};
+
 </script>
 
 <style lang="scss" scoped>

src/components/RecommendSonglist.vue

@@ -8,7 +8,12 @@
         >
             <!-- 推荐音乐列表 -->
             <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
-                <song-item :item="item" :index="index" />
+                <div
+                    :class="setAnimationClass('animate__bounceInUp')"
+                    :style="setAnimationDelay(index, 100)"
+                >
+                    <song-item :item="item" />
+                </div>
             </template>
         </div>
     </div>
@@ -18,7 +23,7 @@
 import { onMounted, ref } from "vue";
 import { getRecommendMusic } from "@/api/home";
 import type { IRecommendMusic } from "@/type/music";
-import { setAnimationClass } from "@/utils";
+import { setAnimationClass, setAnimationDelay } from "@/utils";
 import SongItem from "./common/SongItem.vue";
 // 推荐歌曲
 const recommendMusic = ref<IRecommendMusic>();

src/components/common/SongItem.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
-        class="recommend-music-list-item"
-        :class="setAnimationClass('animate__bounceInUp')"
-        :style="setAnimationDelay(index, 200)"
-    >
+    <div class="recommend-music-list-item">
         <img :src="item.picUrl + '?param=200y200'" class="recommend-music-list-item-img" />
         <div class="recommend-music-list-item-content">
             <div class="recommend-music-list-item-content-title">
@@ -12,9 +8,9 @@
             <div class="recommend-music-list-item-content-name">
                 <n-ellipsis class="text-ellipsis" line-clamp="1">
                     <span
-                        v-for="(artists,index) in item.song.artists"
-                        :key="index"
-                    >{{ artists.name }}{{ index < item.song.artists.length - 1 ? ' / ' : '' }}</span>
+                        v-for="(artists,artistsindex) in item.song.artists"
+                        :key="artistsindex"
+                    >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span>
                 </n-ellipsis>
             </div>
         </div>
@@ -34,20 +30,14 @@
 </template>
 
 <script lang="ts" setup>
-import { setAnimationDelay, setAnimationClass } from "@/utils";
 import { useStore } from "vuex";
 import type { SongResult } from "@/type/music";
 import { computed, } from "vue";
-import type { PropType } from "vue";
 
 
 const props = defineProps({
     item: {
-        type: Object as PropType<SongResult>,
-        required: true
-    },
-    index: {
-        type: Number,
+        type: Object,
         required: true
     }
 })