791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<template>
|
|
<v-card class="mx-auto my-12" max-width="374">
|
|
<v-img height="250" src="https://cdn.vuetifyjs.com/images/cards/cooking.png"></v-img>
|
|
|
|
<v-card-title>Cafe Badilico</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-row align="center" class="mx-0">
|
|
<v-rating :value="4.5" color="amber" dense half-increments readonly size="14"></v-rating>
|
|
|
|
<div class="grey--text ml-4">4.5 (413)</div>
|
|
</v-row>
|
|
|
|
<div class="my-4 subtitle-1 black--text">$ • Italian, Cafe</div>
|
|
|
|
<div>Small plates, salads & sandwiches an inteimate setting with 12 indoor seats plus patio seating.</div>
|
|
</v-card-text>
|
|
|
|
<v-divider class="mx-4"></v-divider>
|
|
|
|
<v-card-title>Tonight's availability</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-chip-group v-model="selection" active-class="deep-purple accent-4 white--text" column>
|
|
<v-chip>5:30PM</v-chip>
|
|
|
|
<v-chip>7:30PM</v-chip>
|
|
|
|
<v-chip>8:00PM</v-chip>
|
|
|
|
<v-chip>9:00PM</v-chip>
|
|
</v-chip-group>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-btn color="deep-purple accent-4" text @click="reserve">Reserve</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
loading: false,
|
|
selection: 1
|
|
}),
|
|
|
|
methods: {
|
|
reserve() {
|
|
this.loading = true
|
|
|
|
setTimeout(() => (this.loading = false), 2000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |