nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Started MusicRow layout top to items for demo

pull/16/head
Nikan Dalvand 2019-07-24 18:43:33 +04:30
parent cad77d3751
commit 0454d51eb7
3 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/components/MusicBox.vue
View File

@ -15,7 +15,7 @@ export default {
onLoad () { onLoad () {
let img = this.$el.getElementsByTagName('img')[0] let img = this.$el.getElementsByTagName('img')[0]
color(img.src, {format: 'rgb'}, (_, color) => { color(img.src, {format: 'rgb'}, (_, color) => {
img.style['boxShadow'] = `0px 10px 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60)` img.style['boxShadow'] = `0px 5px 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60),0px 10px 40px 4px rgba(${color[0]},${color[1]},${color[2]},0.40)`
}) })
} }
} }
@ -24,7 +24,7 @@ export default {
<style scoped lang="sass"> <style scoped lang="sass">
div.music-box div.music-box
width: 150px width: 140px
img img
border-radius: 4px border-radius: 4px
width: 100% width: 100%

13
src/renderer/layouts/HomePage.vue
View File

@ -2,25 +2,20 @@
<section> <section>
<ActionBar /> <ActionBar />
<div> <div>
<Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4], [1000, 4], [1200, 5]]"> <MusicRow :items='items' />
<Slide v-for="item in top" :key="item.id">
<MusicBox :item="item" />
</Slide>
</Carousel>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import ActionBar from './ActionBar' import ActionBar from './ActionBar'
import MusicBox from '../components/MusicBox' import MusicRow from './MusicRow'
import { Carousel, Slide } from 'vue-carousel'
export default { export default {
name: 'HomePage', name: 'HomePage',
components: { ActionBar, MusicBox, Carousel, Slide }, components: { ActionBar, MusicRow },
data: () => { data: () => {
return { return {
top: [ items: [
{ {
id: 0, id: 0,
title: 'Habiba', title: 'Habiba',

23
src/renderer/layouts/MusicRow.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<section>
<Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4], [1000, 4], [1200, 5] , [1300, 6]]">
<Slide v-for="item in items" :key="item.id">
<MusicBox :item="item" />
</Slide>
</Carousel>
</section>
</template>
<script>
import { Carousel, Slide } from 'vue-carousel'
import MusicBox from '../components/MusicBox'
export default {
name: 'MusicRow',
props: ['items'],
components: { MusicBox, Carousel, Slide }
}
</script>
<style>
</style>