🦄 refactor(样式): 修改样式 修改图片加载方式

src/components/PlaylistType.vue

@@ -2,7 +2,7 @@
     <!-- 歌单分类列表 -->
     <div class="play-list-type">
         <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
-        <n-layout class="bg-black">
+        <n-layout>
             <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
                 <span
                     class="play-list-type-item"
@@ -66,7 +66,7 @@ onMounted(() => {
 }
 .play-list-type {
     width: 250px;
-    @apply mr-6;
+    @apply mx-6;
     &-item,
     &-showall {
         @apply py-2 px-3 mr-3 mb-3 inline-block border border-gray-700 rounded-xl cursor-pointer hover:bg-green-600 transition;

src/components/RecommendAlbum.vue

@@ -9,9 +9,11 @@
                     :class="setAnimationClass('animate__backInUp')"
                     :style="setAnimationDelay(index, 100)"
                 >
-                    <img
+                    <n-image
                         class="recommend-album-list-item-img"
-                        :src="item.blurPicUrl + '?param=200y200'"
+                        :src="getImgUrl( item.blurPicUrl, '200y200')"
+                        lazy
+                        preview-disabled
                     />
                     <div class="recommend-album-list-item-content">{{ item.name }}</div>
                 </div>
@@ -24,7 +26,7 @@
 import { getNewAlbum } from "@/api/home"
 import { ref, onMounted } from "vue";
 import type { IAlbumNew } from "@/type/album"
-import { setAnimationClass, setAnimationDelay } from "@/utils";
+import { setAnimationClass, setAnimationDelay, getImgUrl } from "@/utils";
 
 
 const albumData = ref<IAlbumNew>()

src/components/RecommendSinger.vue

@@ -10,7 +10,7 @@
                 :key="item.id"
             >
                 <div
-                    :style="setBackgroundImg(item.picUrl + '?param=500y500')"
+                    :style="setBackgroundImg(getImgUrl(item.picUrl,'300y300'))"
                     class="recommend-singer-item-bg"
                 ></div>
                 <div
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { setBackgroundImg, setAnimationDelay, setAnimationClass } from "@/utils";
+import { setBackgroundImg, setAnimationDelay, setAnimationClass,getImgUrl } from "@/utils";
 import { onMounted, ref } from "vue";
 import { getHotSinger } from "@/api/home";
 import type { IHotSinger } from "@/type/singer";

src/components/common/SongItem.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="recommend-music-list-item">
-    <img
-      :src="item.picUrl + '?param=200y200'"
+    <n-image
+      :src="getImgUrl( item.picUrl, '200y200')"
       class="recommend-music-list-item-img"
+      lazy
+      preview-disabled
     />
     <div class="recommend-music-list-item-content">
       <div class="recommend-music-list-item-content-title">
@@ -43,6 +45,7 @@
 import { useStore } from 'vuex'
 import type { SongResult } from '@/type/music'
 import { computed } from 'vue'
+import { getImgUrl } from '@/utils'
 
 const props = defineProps({
   item: {