61 lines
941 B
Vue
61 lines
941 B
Vue
<template>
|
|
<div class="mix">
|
|
<Platine :track="track1" />
|
|
<Platine :track="track2" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useDataStore } from '~/store/data'
|
|
|
|
const dataStore = useDataStore()
|
|
const track1 = ref(null)
|
|
const track2 = ref(null)
|
|
|
|
// Configuration du layout
|
|
definePageMeta({
|
|
layout: 'empty'
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await dataStore.loadData()
|
|
track1.value = dataStore.getRandomPlaylistTrack()
|
|
track2.value = dataStore.getRandomPlaylistTrack()
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.mix {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Écran portrait (plus haut que large) */
|
|
@media (orientation: portrait) {
|
|
.mix {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.platine {
|
|
height: 50vh;
|
|
|
|
.disc {
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Écran paysage (plus large que haut) */
|
|
@media (orientation: landscape) {
|
|
.mix {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.platine {
|
|
width: 50vw;
|
|
}
|
|
}
|
|
</style>
|