44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<div class="music-box">
|
|
<img @load="onLoad" src="/static/demo/artwork-5.png" alt="Artwork">
|
|
<p class="title">Don't Hide - single</p>
|
|
<p class="artist">Mike Perry & Willie Willie Willie</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import color from 'dominant-color'
|
|
export default {
|
|
name: 'MusicBox',
|
|
methods: {
|
|
onLoad () {
|
|
let img = this.$el.getElementsByTagName('img')[0]
|
|
color(img.src, {format: 'rgb'}, (_, color) => {
|
|
img.style['boxShadow'] = `0px 10px 60px 2px rgba(${color[0]},${color[1]},${color[2]},0.60)`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
div.music-box
|
|
width: 150px
|
|
img
|
|
border-radius: 4px
|
|
width: 100%
|
|
height: auto
|
|
box-shadow: 0px 10px 60px -2px rgba(0,0,0,0.60)
|
|
transition: box-shadow 500ms
|
|
p
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
margin: 0.5rem 0
|
|
&.title
|
|
font-size: .9rem
|
|
&.artist
|
|
font-size: 0.8rem
|
|
color: lighten(black,50)
|
|
</style>
|