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
54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<template>
|
|
<section class="mx-auto trending">
|
|
<v-container fluid class="pa-4">
|
|
<h1 class="pa-4">TRENDING</h1>
|
|
<v-slide-group v-model="model" class="pa-4" show-arrows>
|
|
<v-slide-item v-for="n in 7" :key="n" v-slot:default="{ active, toggle }">
|
|
<div class="d-flex flex-column ma-4 pa-4">
|
|
<v-sheet height="320" width="290" class="pa-4" color="white" tile>
|
|
<v-img
|
|
src="https://gusta-online.nl/media/catalog/product/cache/4/image/544000d3f0f3eb3fd09c51e2c6034a96/0/4/04125370.jpg"
|
|
contain
|
|
/>
|
|
</v-sheet>
|
|
|
|
<span class="title mt-6">Linteloo</span>
|
|
<span class="subtitle">Isola salontafel van Roderick Vos, large</span>
|
|
<span class="mt-6 font-weight-black">4125,-</span>
|
|
</div>
|
|
|
|
<!-- <v-card color="white" class="ma-4 pa-4" height="320" width="290" tile flat>
|
|
<v-card-text>
|
|
|
|
</v-card-text>
|
|
</v-card>-->
|
|
</v-slide-item>
|
|
</v-slide-group>
|
|
|
|
<v-expand-transition>
|
|
<v-sheet v-if="model != null" color="grey lighten-4" height="200" tile>
|
|
<v-row class="fill-height" align="center" justify="center">
|
|
<h3 class="title">Selected {{ model }}</h3>
|
|
</v-row>
|
|
</v-sheet>
|
|
</v-expand-transition>
|
|
</v-container>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import Product from '@/components/Product/Product'
|
|
|
|
export default {
|
|
components: { Product },
|
|
data: () => ({
|
|
model: null
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.trending {
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style> |