girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 13:17:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: change the style of playing track

Browse source
This commit is contained in:
qier222 2020-10-22 21:21:32 +08:00
parent 281f9fe0bc
commit 903c58d659
1 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/TrackListItem.vue
View file

@ -7,16 +7,26 @@
@mouseover="focus = true" @mouseover="focus = true"
@mouseleave="focus = false" @mouseleave="focus = false"
> >
<img :src="imgUrl | resizeImage(224)" v-if="!isAlbum" @click="goToAlbum" /> <img
:src="imgUrl | resizeImage(224)"
v-if="!isAlbum"
@click="goToAlbum"
:class="{ hover: focus }"
/>
<div class="no" v-if="isAlbum"> <div class="no" v-if="isAlbum">
<button <button
class="play-button" class="play-button"
v-show="focus && track.playable" v-show="focus && track.playable && !isPlaying"
@click="playTrack" @click="playTrack"
> >
<svg-icon icon-class="play"></svg-icon> <svg-icon icon-class="play"></svg-icon>
</button> </button>
<span v-show="!focus || !track.playable">{{ track.no }}</span> <span v-show="(!focus || !track.playable) && !isPlaying">{{
track.no
}}</span>
<button v-show="isPlaying">
<svg-icon icon-class="volume" style="height:16px;width:16px"></svg-icon>
</button>
</div> </div>
<div class="title-and-artist"> <div class="title-and-artist">
<div class="container"> <div class="container">
@ -156,15 +166,6 @@ button {
} }
} }
button.play-button {
opacity: 1;
.svg-icon {
height: 14px;
width: 14px;
color: #335eea;
}
}
.track { .track {
display: flex; display: flex;
align-items: center; align-items: center;
@ -205,6 +206,11 @@ button.play-button {
border: 1px solid rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.04);
cursor: pointer; cursor: pointer;
} }
img.hover {
filter: drop-shadow(100 200 0 black);
}
.title-and-artist { .title-and-artist {
flex: 1; flex: 1;
display: flex; display: flex;
@ -282,6 +288,7 @@ button.play-button {
.artist, .artist,
.album, .album,
.time, .time,
.no,
.featured { .featured {
color: rgba(0, 0, 0, 0.28) !important; color: rgba(0, 0, 0, 0.28) !important;
} }