commit
fe1464478f
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
|
||||
<div class="navigation__container">
|
||||
<span class="navigation__left" @click="carouselBackward">
|
||||
<span class="navigation__left" @scroll="carouselBackward" @click="carouselBackward">
|
||||
<svg class="navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
|
||||
<g>
|
||||
<path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z"/>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ export default {
|
|||
props: ['to', 'faded', 'click'],
|
||||
computed: {
|
||||
onClick () {
|
||||
console.log(this.click)
|
||||
return this.click || (() => {})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,7 +150,6 @@ export default {
|
|||
this.aboutOpen = true
|
||||
},
|
||||
closeAbout () {
|
||||
console.log('close')
|
||||
this.aboutOpen = false
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -154,91 +154,91 @@ export default {
|
|||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
id: 16,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
id: 17,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
id: 18,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
id: 19,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
id: 20,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 21,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
id: 22,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
id: 23,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
id: 24,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
id: 25,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
id: 26,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
id: 27,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
id: 28,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
id: 29,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
id: 30,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
|
|
@ -259,13 +259,6 @@ export default {
|
|||
duration: '4:30',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
}
|
||||
// {
|
||||
// id: 3,
|
||||
// title: 'Tilte',
|
||||
// artist: 'Juice WRLD',
|
||||
// duration: '5:30',
|
||||
// artwork: '/static/demo/clever.jpg'
|
||||
// }
|
||||
],
|
||||
|
||||
recommends: [
|
||||
|
|
@ -378,6 +371,114 @@ export default {
|
|||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
title: 'Habiba',
|
||||
artist: 'Oldasinus',
|
||||
artwork: '/static/demo/habiba.jpg'
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
title: 'Starboy',
|
||||
artist: 'The Weeknd',
|
||||
artwork: '/static/demo/starboy.png'
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
title: 'Tilte',
|
||||
artist: 'Juice WRLD',
|
||||
artwork: '/static/demo/clever.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,19 +9,12 @@
|
|||
|
||||
<script>
|
||||
import MusicBox from '../components/MusicBox'
|
||||
import Scrollbar from 'smooth-scrollbar'
|
||||
import HorizontalScrollPlugin from '../utility/HorizontalScrollPlugin'
|
||||
import Carousel from '../components/Carousel'
|
||||
Scrollbar.use(HorizontalScrollPlugin)
|
||||
|
||||
export default {
|
||||
name: 'MusicRow',
|
||||
props: ['items', 'title'],
|
||||
components: { MusicBox, Carousel },
|
||||
mounted () {
|
||||
let container = this.$el.getElementsByClassName('items')[0]
|
||||
Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true, horizontal: true })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -313,8 +313,12 @@ section.fullscreen
|
|||
top: 0
|
||||
background-color: white
|
||||
z-index: 1400
|
||||
transition: transform 500ms ease-out
|
||||
transform: translate3d(0,+100%,0)
|
||||
transition: opacity 500ms ease
|
||||
//transform: translate3d(0,+100%,0)
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
&.active
|
||||
transform: translate3d(0,0%,0)
|
||||
opacity: 1
|
||||
pointer-events: all
|
||||
//transform: translate3d(0,0%,0)
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue