lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-18 03:17:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

🌈 style: 修改mv搜索项样式

Browse Source
This commit is contained in:
alger
2024-06-05 15:53:12 +08:00
parent 2f851f3172
commit 8f782cdc9d
1 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/SearchItem.vue
+27 -4
View File
@@ -1,11 +1,14 @@
<template> <template>
<div class="search-item" @click="handleClick"> <div class="search-item" :class="item.type" @click="handleClick">
<div class="search-item-img"> <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>
<div class="search-item-info"> <div class="search-item-info">
<div class="search-item-name">{{ item.name }}</div> <p class="search-item-name">{{ item.name }}</p>
<div class="search-item-artist">{{ item.desc }}</div> <p class="search-item-artist">{{ item.desc }}</p>
</div> </div>
<MusicList <MusicList
@@ -72,6 +75,7 @@ const handleClick = async () => {
@apply w-12 h-12 mr-4 rounded-2xl overflow-hidden; @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;
} }
.search-item-info { .search-item-info {
@apply flex-1 overflow-hidden;
&-name { &-name {
@apply text-white text-sm text-center; @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> </style>