🦄 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
+    <n-image
-      :src="item.picUrl + '?param=200y200'"
+      :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: {

src/index.css

@@ -4,3 +4,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+img{
+  @apply bg-gray-900;
+}
+
+.n-image img {
+  width: 100%;
+}

src/layout/components/MusicFull.vue

@@ -1,8 +1,13 @@
 
 <template>
-  <div id="drawer-target" v-show="isFull">
+  <div id="drawer-target" v-show="isFull" :style="{backgroundImage:`url(${getImgUrl( playMusic?.picUrl, '300y300')})`}">
     <div class="music-img">
-      <img class="img" :src="playMusic?.picUrl + '?param=300y300'" />
+      <n-image
+        :src="getImgUrl( playMusic?.picUrl, '300y300')"
+        class="img" 
+        lazy
+        preview-disabled
+      />
     </div>
     <div class="music-content">
       <div class="music-content-name">{{ playMusic?.song.name }}</div>
@@ -37,6 +42,7 @@ import type { SongResult } from "@/type/music";
 import type { ILyric } from "@/type/lyric";
 import { getMusicLrc } from "@/api/music"
 import { useStore } from 'vuex';
+import { getImgUrl } from '@/utils'
 
 const store = useStore();
 const props = defineProps({
@@ -150,7 +156,8 @@ const mouseLeaveLayout = () => {
 <style lang="scss" scoped>
 #drawer-target {
   @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
-  background-color: #333333;
+  // background-color: #333333;
+  backdrop-filter: saturate(180%) blur(20px);
   animation-duration: 300ms;
   .music-img {
     @apply flex-1;

src/layout/components/PlayBar.vue

@@ -2,8 +2,14 @@
   <!-- 展开全屏 -->
   <transition name="musicPage">
     <div id="drawer-target" v-show="musicFull">
+      <div class="drawer-target-back" :style="{backgroundImage:`url(${getImgUrl( playMusic?.picUrl, '300y300')})`}"></div>
       <div class="music-img">
-        <img class="img" :src="playMusic.picUrl + '?param=300y300'" />
+        <n-image
+          :src="getImgUrl( playMusic?.picUrl, '300y300')"
+          class="img" 
+          lazy
+          preview-disabled
+        />
       </div>
       <div class="music-content">
         <div class="music-content-name">{{ playMusic.song.name }}</div>
@@ -24,7 +30,13 @@
   </transition>
   <!-- 底部播放栏 -->
   <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
-    <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" @click="setMusicFull" />
+    <n-image
+          :src="getImgUrl( playMusic?.picUrl, '300y300')"
+          class="play-bar-img" 
+          lazy
+          preview-disabled
+          @click="setMusicFull"
+        />
     <div class="music-content">
       <div class="music-content-title">
         <n-ellipsis class="text-ellipsis" line-clamp="1">{{
@@ -88,7 +100,7 @@
 <script lang="ts" setup>
 import type { SongResult } from '@/type/music'
 import type { ILyric } from '@/type/lyric'
-import { secondToMinute } from '@/utils'
+import { secondToMinute, getImgUrl} from '@/utils'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { setAnimationClass } from '@/utils'
@@ -363,15 +375,29 @@ const setAudioTime = (index: any) => {
   animation: fadeOutDown 0.8s ease-in-out;
 }
 
+.drawer-target-back{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  left: 0;
+  opacity: 0.8;
+  filter: blur(143px) brightness(80%);
+  background-size: 100%;
+}
+
 #drawer-target {
   @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
-  background-color: #333333;
+  backdrop-filter: saturate(180%) blur(50px);
+
+  // background-color: #333333;
   animation-duration: 300ms;
 
   .music-img {
-    @apply flex-1;
+    @apply flex-1 flex justify-center mr-24;
 
     .img {
+      width: 450px;
       @apply rounded-xl;
     }
   }
@@ -389,7 +415,7 @@ const setAudioTime = (index: any) => {
   }
 
   .music-lrc {
-    background-color: #333333;
+    background-color: inherit;
     width: 800px;
     height: 550px;
 

src/router/index.ts

@@ -23,5 +23,5 @@ const routes = [
 
 export default createRouter({
   routes: routes,
-  history: createMemoryHistory(),
+  history: createWebHistory(),
 })

src/utils/index.ts

@@ -1,26 +1,37 @@
+import { computed } from 'vue'
+
 // 设置歌手背景图片
 export const setBackgroundImg = (url: String) => {
-  return "background-image:" + "url(" + url + ")"
+  return 'background-image:' + 'url(' + url + ')'
 }
 // 设置动画类型
 export const setAnimationClass = (type: String) => {
-  return "animate__animated " + type
+  return 'animate__animated ' + type
 }
 // 设置动画延时
 export const setAnimationDelay = (index: number = 6, time: number = 50) => {
-  return "animation-delay:" + index * time + "ms"
+  return 'animation-delay:' + index * time + 'ms'
 }
 
 //将秒转换为分钟和秒
 export const secondToMinute = (s: number) => {
   if (!s) {
-    return "00:00"
+    return '00:00'
   }
   let minute: number = Math.floor(s / 60)
   let second: number = Math.floor(s % 60)
   let minuteStr: string =
-    minute > 9 ? minute.toString() : "0" + minute.toString()
+    minute > 9 ? minute.toString() : '0' + minute.toString()
   let secondStr: string =
-    second > 9 ? second.toString() : "0" + second.toString()
+    second > 9 ? second.toString() : '0' + second.toString()
-  return minuteStr + ":" + secondStr
+  return minuteStr + ':' + secondStr
 }
+
+export const getIsMc = () => {
+  return !!location.href.includes('mc.')
+}
+
+export const getImgUrl = computed(() => (url: string, size: string) => {
+  const bdUrl = 'https://image.baidu.com/search/down?url='
+  return getIsMc() ? `${bdUrl}${url}?param${size}` : `${url}?param${size}`
+})

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;
+    @apply grid gap-6 pb-28;
-    padding-bottom: 100px;
+    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%;
+    // width: 100%;
-    height: 70%;
+    // height: 70%;
-    position: absolute;
+    // position: absolute;
-    background-color: #000000f0;
+    // background-color: #000000f0;
-    bottom: 0;
+    // bottom: 0;
-    left: 0;
+    // left: 0;
-    border-radius: 30px 30px 0 0;
+    // border-radius: 30px 30px 0 0;
-    animation-duration: 300ms;
+    // 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>