🐞 fix(img): 修复图片展示慢的问题

src/components/RecommendAlbum.vue

@@ -52,13 +52,13 @@ onMounted(() => {
         &-item {
             @apply rounded-xl overflow-hidden relative;
             &-img {
-                @apply rounded-xl transition;
+                @apply rounded-xl transition w-full h-full;
             }
             &: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;
+                @apply w-full h-full opacity-0 transition absolute z-10 top-0 left-0 p-4 text-xl bg-opacity-60 bg-black;
             }
             &-content:hover {
                 opacity: 1;

src/components/common/SongItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="recommend-music-list-item">
     <n-image
-      :src="getImgUrl( item.picUrl, '200y200')"
+      :src="getImgUrl( item.picUrl, '40y40')"
       class="recommend-music-list-item-img"
       lazy
       preview-disabled

src/layout/components/MusicFull.vue

@@ -1,8 +1,14 @@
 <template>
-   <n-drawer :show="musicFull" height="100vh" placement="bottom" :drawer-style="{backgroundColor:'transparent'}">
+  <n-drawer
+    :show="musicFull"
+    height="100vh"
+    placement="bottom"
+    :drawer-style="{ backgroundColor: 'transparent' }"
+  >
     <div id="drawer-target">
       <div class="music-img">
         <n-image
+          ref="PicImgRef"
           :src="getImgUrl(playMusic?.picUrl, '300y300')"
           class="img"
           lazy
@@ -29,7 +35,7 @@
             <div
               class="music-lrc-text"
               :class="{ 'now-text': isCurrentLrc(index, nowTime) }"
-              @click="setAudioTime(index,audio)"
+              @click="setAudioTime(index, audio)"
             >
               {{ item.text }}
             </div>
@@ -41,7 +47,7 @@
         <n-button @click="addCorrectionTime(0.2)">+0.2</n-button>
       </div>
     </div>
-   </n-drawer>
+  </n-drawer>
 </template>
 
 <script setup lang="ts">
@@ -57,7 +63,6 @@ import {
   reduceCorrectionTime,
   setAudioTime,
   nowTime,
-  allTime,
 } from '@/hooks/MusicHook'
 
 const store = useStore()
@@ -75,7 +80,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:musicFull'])
 
-
 // 播放的音乐信息
 const playMusic = computed(() => store.state.playMusic as SongResult)
 // 获取歌词滚动dom
@@ -98,10 +102,8 @@ const mouseLeaveLayout = () => {
 }
 
 defineExpose({
-  lrcScroll
+  lrcScroll,
 })
-
-
 </script>
 
 <style scoped lang="scss">
@@ -153,4 +155,4 @@ defineExpose({
     }
   }
 }
-</style>
+</style>

src/utils/index.ts

@@ -33,5 +33,6 @@ export const getIsMc = () => {
 
 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}`
+  const imgUrl = encodeURIComponent(`${url}?param=${size}`)
+  return getIsMc() ? `${bdUrl}${imgUrl}` : `${url}?param=${size}`
 })

src/views/search/index.vue

@@ -28,7 +28,6 @@
             class="search-list"
             :class="setAnimationClass('animate__fadeInUp')"
             :native-scrollbar="false"
-            @scroll="searchScrolling"
         >
             <div class="title">{{ hotKeyword }}</div>
             <div class="search-list-box">
@@ -69,10 +68,6 @@ const loadHotSearch = async () => {
     hotSearchData.value = data;
 };
 
-function searchScrolling(e: any) {
-    console.log(e);
-}
-
 
 onMounted(() => {
     loadHotSearch();