kit-eco.social/consumocuidado
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip migration

Browse Source
This commit is contained in:
María
2025-08-14 15:12:29 +02:00
commit 61d96ac328
148 changed files with 31438 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
components/HighlightsCard.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div class="box">
<div class="title">
<h5 class="category-title">{{ title }}</h5>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<NuxtLink :to="`/productos/${products[0] ? products[0].id : 1}`">
<div class="item">
<BImg
class="image"
fluid
:src="getProductImg(products[0])"
alt=""
/>
<h6 class="product-name">
{{
products[0]
? products[0].name
.toLowerCase()
.replace(/^[a-zA-ZÀ-ÿ\u00f1\u00d1]/, (c) =>
c.toUpperCase()
)
: ''
}}
</h6>
</div>
</NuxtLink>
</div>
<div class="col-6">
<NuxtLink :to="`/productos/${products[1] ? products[1].id : 1}`">
<div class="item">
<BImg
class="image"
fluid
:src="getProductImg(products[1])"
alt=""
/>
<h6 class="product-name">
{{
products[1]
? products[1].name
.toLowerCase()
.replace(/^[a-zA-ZÀ-ÿ\u00f1\u00d1]/, (c) =>
c.toUpperCase()
)
: ''
}}
</h6>
</div>
</NuxtLink>
</div>
</div>
<div class="row">
<div class="col-6">
<NuxtLink :to="`/productos/${products[2] ? products[2].id : 1}`">
<div class="item">
<BImg
class="image"
fluid
:src="getProductImg(products[2])"
alt=""
/>
<h6 class="product-name">
{{
products[2]
? products[2].name
.toLowerCase()
.replace(/^[a-zA-ZÀ-ÿ\u00f1\u00d1]/, (c) =>
c.toUpperCase()
)
: ''
}}
</h6>
</div>
</NuxtLink>
</div>
<div class="col-6">
<NuxtLink :to="`/productos/${products[3] ? products[3].id : 1}`">
<div class="item">
<BImg
class="image"
fluid
:src="getProductImg(products[3])"
alt=""
/>
<h6 class="product-name">
{{
products[3]
? products[3].name
.toLowerCase()
.replace(/^[a-zA-ZÀ-ÿ\u00f1\u00d1]/, (c) =>
c.toUpperCase()
)
: ''
}}
</h6>
</div>
</NuxtLink>
</div>
</div>
</div>
<nuxt-link class="link" :to="`/busqueda?category=${category}`"
>Ver más &#8594;</nuxt-link
>
</div>
</template>
<script>
export default {
name: 'HighlightsCard',
props: {
title: {
type: String,
default: '',
},
category: {
type: String,
default: '',
},
products: {
type: Array,
default: () => [],
},
},
methods: {
getProductImg(product) {
if (product && product.image) return product.image
return `@/assets/img/latienda-product-default.svg`
},
},
}
</script>
<style lang="scss" scoped>
.box {
border-radius: 7px;
border: 1px solid $color-greylighter;
position: relative;
background-color: $color-light;
margin-top: 30px;
height: 100%;
display: block;
overflow: auto;
padding: 0.8rem;
padding-bottom: 0.4rem;
@include mobile {
margin-top: 15px;
}
}
.category-title {
color: $color-navy;
}
.link {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
color: $color-greylink;
font-family: $font-primary;
font-weight: $bold;
font-size: $s;
}
.item {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
.product-name {
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
font-family: $font-secondary;
font-size: $s;
font-weight: 400;
display: -webkit-box;
--webkit-line-clamp: 2;
--webkit-box-orient: vertical;
overflow: hidden;
margin-top: 0.6rem;
}
}
.image {
width: 100%;
max-height: 6rem;
max-width: 6rem;
object-fit: cover;
@include mobile {
max-height: 12rem;
max-width: 12rem;
}
}
.title {
width: 100%;
margin: 1.2rem 0 0.5rem;
text-align: center;
}
</style>