添加专辑推荐 播放进度条优化

src/components/PlaylistType.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- 歌单分类列表 -->
     <div class="play-list-type">
-        <div class="title animate__animated animate__fadeInLeft">歌单分类</div>
+        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
         <n-layout class="bg-black">
             <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
                 <span

src/components/RecommendAlbum.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="recommend-album">
+        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">最新专辑</div>
+        <div class="recommend-album-list">
+            <template v-for="(item,index) in albumData?.albums" :key="item.id">
+                <div
+                    v-if="index < 6"
+                    class="recommend-album-list-item"
+                    :class="setAnimationClass('animate__backInUp')"
+                    :style="setAnimationDelay(index, 100)"
+                >
+                    <img
+                        class="recommend-album-list-item-img"
+                        :src="item.blurPicUrl + '?param=200y200'"
+                    />
+                    <div class="recommend-album-list-item-content">{{ item.name }}</div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { getNewAlbum } from "@/api/home"
+import { ref, onMounted } from "vue";
+import type { IAlbumNew } from "@/type/album"
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+
+
+const albumData = ref<IAlbumNew>()
+const loadAlbumList = async () => {
+    const { data } = await getNewAlbum();
+    albumData.value = data
+}
+
+onMounted(() => {
+    loadAlbumList()
+})
+</script>
+
+<style lang="scss" scoped>
+.recommend-album {
+    @apply flex-1 mx-5;
+    .title {
+        @apply text-lg font-bold mb-4;
+    }
+
+    .recommend-album-list {
+        @apply grid grid-cols-2 grid-rows-3 gap-2;
+        &-item {
+            @apply rounded-xl overflow-hidden relative;
+            &-img {
+                @apply rounded-xl transition;
+            }
+            &:hover img {
+                filter: brightness(50%);
+            }
+            &-content {
+                @apply w-full h-full opacity-0 transition absolute z-10 top-0 left-0 p-4 text-xl;
+            }
+            &-content:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+</style>

src/components/RecommendSinger.vue

@@ -9,7 +9,10 @@
                 :style="setAnimationDelay(index, 100)"
                 :key="item.id"
             >
-                <div :style="setBackgroundImg(item.picUrl)" class="recommend-singer-item-bg"></div>
+                <div
+                    :style="setBackgroundImg(item.picUrl + '?param=500y500')"
+                    class="recommend-singer-item-bg"
+                ></div>
                 <div
                     class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"
                 >{{ item.musicSize }}首</div>

src/components/RecommendSonglist.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="recommend-music">
-        <div class="title animate__animated animate__fadeInLeft">本周最热音乐</div>
+        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
         <div
             class="recommend-music-list"
             :class="setAnimationClass('animate__bounceInUp')"
@@ -40,10 +40,11 @@ onMounted(() => {
     @apply text-lg font-bold mb-4;
 }
 .recommend-music {
+    @apply flex-auto;
+    // width: 530px;
     .text-ellipsis {
         width: 100%;
     }
-    @apply flex-1 mr-96;
     &-list {
         @apply rounded-3xl p-2 w-full border border-gray-700;
         background-color: #0d0d0d;