consumocuidado/components/HighlightsCard.vue

<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>