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

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-page">
+  <n-layout class="main-page" :native-scrollbar="false">
     <!-- 推荐歌手 -->
     <recommend-singer />
     <div class="main-content">
@@ -10,11 +10,11 @@
       <!-- 推荐最新专辑 -->
       <recommend-album />
     </div>
-  </div>
+  </n-layout>
 </template>
 
 <script lang="ts" setup>
-import {defineAsyncComponent} from 'vue';
+import { defineAsyncComponent } from 'vue';
 // import RecommendSinger from "@/components/RecommendSinger.vue";
 // import PlaylistType from "@/components/PlaylistType.vue";
 // import RecommendSonglist from "@/components/RecommendSonglist.vue";
@@ -48,8 +48,9 @@ const RecommendAlbum = defineAsyncComponent(() => import("@/components/Recommend
 
 <style lang="scss" scoped>
 .main-page {
-  @apply mt-4 pb-32;
+  @apply mt-4 h-full;
 }
+
 .main-content {
   @apply mt-6 flex;
 }

src/views/list/index.vue

@@ -3,7 +3,7 @@ import { getRecommendList, getListDetail, getListByTag, getListByCat } from '@/a
 import { computed, onMounted, ref, watch } from 'vue';
 import type { IRecommendList, IRecommendItem } from "@/type/list";
 import type { IListDetail } from "@/type/listDetail";
-import { setAnimationClass, setAnimationDelay } from "@/utils";
+import { setAnimationClass, setAnimationDelay, getImgUrl } from "@/utils";
 import SongItem from "@/components/common/SongItem.vue";
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
@@ -16,8 +16,8 @@ const showMusic = ref(false)
 const recommendItem = ref<IRecommendItem>()
 const listDetail = ref<IListDetail>()
 const selectRecommendItem = async (item: IRecommendItem) => {
-  const { data } = await getListDetail(item.id)
   showMusic.value = true
+  const { data } = await getListDetail(item.id)
   recommendItem.value = item
   listDetail.value = data
 }
@@ -119,7 +119,12 @@ const handlePlay = (item: any) => {
           @click.stop="selectRecommendItem(item)"
         >
           <div class="recommend-item-img">
-            <img :src="(item.picUrl || item.coverImgUrl) + '?param=200y200'" />
+            <n-image
+              class="recommend-item-img-img"
+              :src="getImgUrl( (item.picUrl || item.coverImgUrl), '200y200')"
+              lazy
+              preview-disabled
+            />
             <div class="top">
               <div class="play-count">{{ formatNumber(item.playCount) }}</div>
               <i class="iconfont icon-videofill"></i>
@@ -170,18 +175,16 @@ const handlePlay = (item: any) => {
   }
 
   &-list {
-    @apply flex flex-wrap justify-between;
-    padding-bottom: 100px;
+    @apply grid gap-6 pb-28;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
   &-item {
-    width: 200px;
-    @apply mr-6 mb-4;
     &-img {
       @apply rounded-xl overflow-hidden relative;
       &:hover img {
         @apply hover:scale-110 transition-all duration-300 ease-in-out;
       }
-      img {
+      &-img {
         width: 200px;
         height: 200px;
       }
@@ -217,14 +220,15 @@ const handlePlay = (item: any) => {
 
 .music {
   &-page {
-    width: 100%;
-    height: 70%;
-    position: absolute;
-    background-color: #000000f0;
-    bottom: 0;
-    left: 0;
-    border-radius: 30px 30px 0 0;
-    animation-duration: 300ms;
+    // width: 100%;
+    // height: 70%;
+    // position: absolute;
+    // background-color: #000000f0;
+    // bottom: 0;
+    // left: 0;
+    // border-radius: 30px 30px 0 0;
+    // animation-duration: 300ms;
+    @apply w-full h-5/6 absolute bottom-0 left-0 bg-black rounded-t-3xl flex flex-col transition-all;
   }
   &-title {
     @apply text-lg font-bold text-white p-4;

src/views/search/index.vue

@@ -6,6 +6,7 @@
             :native-scrollbar="false"
         >
             <div class="title">热搜列表</div>
+           <div class="hot-search-list">
             <template v-for="(item, index) in hotSearchData?.data">
                 <div
                     :class="setAnimationClass('animate__bounceInLeft')"
@@ -20,6 +21,7 @@
                     {{ item.searchWord }}
                 </div>
             </template>
+           </div>
         </n-layout>
         <!-- 搜索到的歌曲列表 -->
         <n-layout
@@ -29,7 +31,8 @@
             @scroll="searchScrolling"
         >
             <div class="title">{{ hotKeyword }}</div>
-            <template v-if="searchDetail">
+            <div class="search-list-box">
+              <template v-if="searchDetail">
                 <div
                     v-for="(item, index) in searchDetail?.result.songs"
                     :key="item.id"
@@ -39,6 +42,7 @@
                     <SongItem :item="item" />
                 </div>
             </template>
+            </div>
         </n-layout>
     </div>
 </template>
@@ -125,6 +129,9 @@ watch(
     animation-duration: 0.2s;
     min-width: 400px;
     height: 100%;
+    &-list{
+      @apply pb-28;
+    }
     &-item {
         @apply px-4 py-3 text-lg hover:bg-gray-700 rounded-xl cursor-pointer;
         &-count {
@@ -140,6 +147,9 @@ watch(
     @apply mt-3 flex-1 rounded-xl;
     background-color: #0d0d0d;
     height: 100%;
+    &-box{
+      @apply pb-28;
+    }
 }
 
 .title {

src/views/user/index.vue

@@ -4,7 +4,7 @@ import { useRouter } from "vue-router";
 import { getUserDetail, getUserPlaylist, getUserRecord } from "@/api/user";
 import type { IUserDetail } from "@/type/user";
 import { computed, ref } from "vue";
-import { setAnimationClass, setAnimationDelay } from "@/utils";
+import { setAnimationClass, setAnimationDelay, getImgUrl } from "@/utils";
 import { getListDetail } from '@/api/list'
 import SongItem from "@/components/common/SongItem.vue";
 
@@ -115,7 +115,12 @@ const handlePlay = (item: any) => {
             :key="index"
             @click="showPlaylist(item.id)"
           >
-            <img class="play-list-item-img" :src="item.coverImgUrl" />
+            <n-image
+              :src="getImgUrl( item.coverImgUrl, '')"
+              class="play-list-item-img"
+              lazy
+              preview-disabled
+            />
             <div class="play-list-item-info">
               <div class="play-list-item-name">{{ item.name }}</div>
               <div class="play-list-item-count">{{ item.trackCount }}首，播放{{ item.playCount }}次</div>