46 lines
756 B
Vue
46 lines
756 B
Vue
<template>
|
|
<div class="deck">
|
|
<card
|
|
v-for="track in tracks"
|
|
:key="track.id"
|
|
:track="track"
|
|
:is-face-up="track.isFaceUp"
|
|
@click="flipCard(track)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useDataStore } from '~/store/data'
|
|
const tracks = ref([])
|
|
definePageMeta({
|
|
layout: 'default'
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const dataStore = useDataStore()
|
|
await dataStore.loadData()
|
|
tracks.value = dataStore.getTracksByboxId('ES2025')
|
|
})
|
|
|
|
function flipCard(track) {
|
|
track.isFaceUp = !track.isFaceUp
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.logo {
|
|
filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
|
|
}
|
|
|
|
.deck {
|
|
position: relative;
|
|
height: 80vh;
|
|
|
|
.card {
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
}
|
|
</style>
|