✨ feat: 修改搜索列表

2026-04-23 15:47:23 +08:00 · 2023-12-27 23:25:26 +08:00
parent f5d097e975
commit c7c1143cb4
10 changed files with 224 additions and 78 deletions
@@ -0,0 +1,50 @@
+<template>
+  <div class="search-item">
+    <div class="search-item-img">
+      <n-image
+        :src="getImgUrl(item.picUrl, 'album')"
+        lazy
+        preview-disabled
+      />
+    </div>
+    <div class="search-item-info">
+      <div class="search-item-name">{{ item.name }}</div>
+      <div class="search-item-artist">{{ item.desc}}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getImgUrl } from '@/utils'
+import type {Album}  from '@/type/album'
+const props = defineProps<{
+  item: {
+    picUrl: string
+    name: string
+    desc: string
+  }
+}>()
+
+</script>
+
+<style scoped lang="scss">
+
+.search-item{
+  @apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
+  margin: 0 10px;
+  .search-item-img{
+    @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;
+  }
+  .search-item-info{
+    &-name{
+      @apply text-white text-sm text-center;
+    }
+    &-artist{
+      @apply text-gray-400 text-xs text-center;
+    }
+  }
+
+
+}
+
+</style>