33 lines
861 B
Vue
33 lines
861 B
Vue
<template>
|
|
<div v-if="boats">
|
|
<q-card v-for="boat in boats" :key="boat.id" flat class="mobile-card">
|
|
<q-card-section>
|
|
<q-img :src="boat.imgSrc" :fit="'scale-down'">
|
|
<div class="row absolute-top">
|
|
<div class="col text-h6 text-left">{{ boat.name }}</div>
|
|
<div class="col text-right">{{ boat.class }}</div>
|
|
</div>
|
|
</q-img>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions align="evenly">
|
|
<q-btn flat>Info</q-btn>
|
|
<q-btn flat>Book</q-btn>
|
|
<q-btn flat>Check-Out</q-btn>
|
|
<q-btn flat>Check-In</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</div>
|
|
<div v-else><q-card>Sorry, no boats to show you!</q-card></div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Boat } from 'src/stores/boat';
|
|
|
|
defineProps({
|
|
boats: Array<Boat>,
|
|
});
|
|
</script>
|