170 lines
3.7 KiB
Vue
170 lines
3.7 KiB
Vue
<template>
|
|
<div class="base">
|
|
<div class="gradient">
|
|
<div class="ilustration wrapper"></div>
|
|
<SearchHeader />
|
|
<img
|
|
class="search-dots"
|
|
src="@/assets/img/latienda-lineapuntos-1.svg"
|
|
alt=""
|
|
/>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<HighlightsCard
|
|
class="highlights"
|
|
:title="`Libros`"
|
|
:category="getKey(cards, 0)"
|
|
:products="getValue(cards, 0)"
|
|
/>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<HighlightsCard
|
|
class="highlights"
|
|
:title="`Cosméticos`"
|
|
:category="getKey(cards, 1)"
|
|
:products="getValue(cards, 1)"
|
|
/>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<HighlightsCard
|
|
class="highlights"
|
|
:title="`Plantas`"
|
|
:category="getKey(cards, 2)"
|
|
:products="getValue(cards, 2)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="items container">
|
|
<h5 class="items-title">Últimos productos</h5>
|
|
<img
|
|
class="items-dots"
|
|
src="@/assets/img/latienda-lineapuntos-2.svg"
|
|
alt=""
|
|
/>
|
|
<ItemsRow :type="`product`" :items="carouselProducts" />
|
|
</div>
|
|
<div class="items container">
|
|
<h5 class="items-title">Últimas cooperativas</h5>
|
|
<img
|
|
class="items-dots"
|
|
src="@/assets/img/latienda-lineapuntos-2.svg"
|
|
alt=""
|
|
/>
|
|
<ItemsRow :type="`company`" :items="carouselCompanies" />
|
|
</div>
|
|
<div class="items container">
|
|
<h5 class="items-title">Categorías más populares</h5>
|
|
<img
|
|
class="items-dots"
|
|
src="@/assets/img/latienda-lineapuntos-2.svg"
|
|
alt=""
|
|
/>
|
|
<ItemsRow :type="`category`" :items="carouselCategories" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
cards: null,
|
|
carouselProducts: null,
|
|
carouselCompanies: null,
|
|
carouselCategories: null
|
|
}
|
|
},
|
|
async mounted() {
|
|
try {
|
|
const config = useRuntimeConfig()
|
|
const response = await $fetch('/initial', {
|
|
baseURL: config.public.baseURL,
|
|
method: 'GET'
|
|
})
|
|
this.cards = response.cards
|
|
this.carouselProducts = response.products
|
|
this.carouselCompanies = response.companies
|
|
this.carouselCategories = response.categories
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
methods: {
|
|
getKey(object, key) {
|
|
return Object.keys(object || {})[key]
|
|
},
|
|
getValue(object, key) {
|
|
return Object.values(object || {})[key]
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrapper {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.ilustration {
|
|
height: 300px;
|
|
width: 500px;
|
|
align-self: center;
|
|
background-image: url('../assets/img/latienda-ilustracion.svg');
|
|
background-size: contain;
|
|
|
|
@include mobile {
|
|
width: 300px;
|
|
height: 170px;
|
|
margin-top: 70px;
|
|
}
|
|
}
|
|
.base {
|
|
margin-bottom: 80px;
|
|
}
|
|
.gradient {
|
|
background: linear-gradient(180deg, #8cead8, #ffffff);
|
|
position: relative;
|
|
left: 0;
|
|
right: 0;
|
|
margin-bottom: 50px;
|
|
}
|
|
.search-dots {
|
|
display: block;
|
|
margin: auto;
|
|
margin-bottom: 20px;
|
|
width: 100px;
|
|
|
|
@include mobile {
|
|
width: 70px;
|
|
margin: 0 auto 0;
|
|
}
|
|
}
|
|
.items {
|
|
width: 100%;
|
|
display: flex;
|
|
height: auto;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
&-title {
|
|
text-align: center;
|
|
}
|
|
&-dots {
|
|
width: 35px;
|
|
margin: 15px auto 30px auto;
|
|
}
|
|
}
|
|
.items-title {
|
|
color: $color-navy;
|
|
margin-top: 3rem;
|
|
}
|
|
</style>
|