From 8f782cdc9d492036ca35cb9f669e4414b7bff25f Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 5 Jun 2024 15:53:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=88=20style:=20=E4=BF=AE=E6=94=B9mv?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E9=A1=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/SearchItem.vue | 31 ++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/common/SearchItem.vue b/src/components/common/SearchItem.vue
index c3dcac8..5c498fe 100644
--- a/src/components/common/SearchItem.vue
+++ b/src/components/common/SearchItem.vue
@@ -1,11 +1,14 @@
 <template>
-  <div class="search-item" @click="handleClick">
+  <div class="search-item" :class="item.type" @click="handleClick">
     <div class="search-item-img">
-      <n-image :src="getImgUrl(item.picUrl, '200y200')" lazy preview-disabled />
+      <n-image :src="getImgUrl(item.picUrl, '320y180')" lazy preview-disabled />
+      <div v-if="item.type === 'mv'" class="play">
+        <i class="iconfont icon icon-play"></i>
+      </div>
     </div>
     <div class="search-item-info">
-      <div class="search-item-name">{{ item.name }}</div>
-      <div class="search-item-artist">{{ item.desc }}</div>
+      <p class="search-item-name">{{ item.name }}</p>
+      <p class="search-item-artist">{{ item.desc }}</p>
     </div>
 
     <MusicList
@@ -72,6 +75,7 @@ const handleClick = async () => {
     @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;
   }
   .search-item-info {
+    @apply flex-1 overflow-hidden;
     &-name {
       @apply text-white text-sm text-center;
     }
@@ -80,4 +84,23 @@ const handleClick = async () => {
     }
   }
 }
+
+.mv {
+  .search-item-img {
+    width: 160px;
+    height: 90px;
+    @apply rounded-lg relative;
+    &:hover {
+      .play {
+        @apply opacity-60;
+      }
+    }
+  }
+  .play {
+    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity;
+    .icon {
+      @apply text-white text-5xl;
+    }
+  }
+}
 </style>