uk_front/components/Card.vue

<template>
  <nuxt-link :to="{name: 'product-code', params: { code: cardData.product_code}}" class="card">
    <figure >
      <!-- <nuxt-link :to="{ name: 'product-code', params: { code: cardData.product_code } }"> -->
      <div class="card-img">
        <el-image  
        :src="comImg"
        class="card-img-1"
        fit="cover"
        style="width: 100%; height: 100%"
        ></el-image>
        <div class="co2-info" v-if="cardData.co2_uk_air && cardData.co2_uk_sea">
            <img src="@/assets/img/esg/ship.png" alt="CO2" class="co2-icon" />
            <span>{{ cardData.co2_uk_sea || 0 }} kg</span>
          <div></div>
            <img src="@/assets/img/esg/aircraft.png" alt="CO2" class="co2-icon" />
            <span>{{ cardData.co2_uk_air || 0 }} kg</span>
        </div>
        <img class="best_icon" :src="comBestIcon" v-if="comBestIcon"/>
        <div class="cycle_icon">
          <img
            :src="item.images"
            v-for="(item, index) of cardData.cycle_icon"
            :key="index"
          />
        </div>
      </div>
      <p class="show-pricing" v-if="showPricing">Pricing</p>
      <!-- </nuxt-link> -->
      <figcaption class="card-info">
        <template v-if="cardData.product_name && cardData.product_name.length > 40">
          <el-tooltip :content="cardData.product_name" placement="top-start">
            <h1>{{ cardData.product_name }}</h1>
          </el-tooltip>
        </template>
        <template v-else>
          <h1>{{ cardData.product_name }}</h1>
        </template>
        <p class="card-info-point">{{ cardData.product_code }}</p>
        <div class="card-info-icon">
          <img
            :src="item.url"
            v-for="(item, index) of cardData.icon"
            :key="index"
          />
        </div>
      </figcaption>
    </figure>
  </nuxt-link>
</template>

<script>
export default {
  props: {
    cardData: {},
    showPricing: { type: Boolean, default: false },
  },
  data() {
    return {};
  },
  computed:{
    comImg(){
      return this.$utils.generateResizedImageUrl(this.cardData.main?.image,300)
    },
    comBestIcon(){
      const bestSeller = this.cardData.collection_detail?.find(item => item.name === "Best Seller");
      return bestSeller ? bestSeller.img : '';
    }
  },
  methods: {
    goProduct(cardData) {
      this.$router.push({
        name: "product-code",
        params: { code: cardData.product_code },
      });
      // let routeData = this.$router.resolve({
      //   name: "product-code",
      //   params:{ code: cardData.product_code },
      // });
      // window.open(routeData.href, '_blank');
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  width: 220px;
  // border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px  rgba(137, 137, 137, 0.05);
  margin-bottom: 30px;
  cursor: pointer;
  transition: all 0.2s ease-out 0s;
  padding-bottom: 30px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 4px;
  &:hover {
    // transform: translate3d(0px, -2px, 0);
    box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.2);
    .card-img-1 {
        transform: scale(1.1);
      }
    h1 {
      color: #006dc9;
    }
    .card-info-compare {
      visibility: visible !important;
    }
  }
  .card-img {
    width: 220px;
    height: 220px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .card-img-1{
      transition: all 0.5s ;
    }
    .best_icon {
      position: absolute;
      top: 0;
      left: 0;
    }
    .co2-info {
      display: flex;
      align-items: center;
      background: #07A73A;
      color: #fff;
      font-weight: bold;
      border-radius: 2px;
      padding: 5px;
      position: absolute;
      bottom: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      div{
        display: inline-block;
        margin: 0 10px;
        width: 2px;
        height: 12px;
        border-right: 2px solid #fff;
      }
      .co2-icon {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    .cycle_icon {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: 132px;
      img {
        margin-left: 4px;
        margin-bottom: 4px;
        width: 40px;
        height: auto;
        vertical-align: middle;
        border-radius: 4px;
      }
    }
  }
  .card-info {
    margin: 0 10px 10px 10px;
    border-top: 1px solid rgba(0, 35, 105, 0.1);
    h1 {
      font-size: 18px;
      line-height: 24px;
      height: 48px;
      font-weight: 600;
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .card-info-point {
      color: #4a596c;
      line-height: 16px;
      height: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .card-info-icon {
      margin: 10px 0;
      height: 32px;
      overflow: hidden;
      img {
        margin-right: 5px;
        // width: 30px;
        height: 30px;
      }
    }
  }
    .card-info-compare {
      text-align: center;
      visibility: hidden;
      // display: none;
      position: absolute;
      bottom: 15px;
      left: 30%;
  
    }
  .show-pricing {
    width: 43px;
    height: 13px;
    font-size: 14px;
    font-family: Proxima Nova;
    font-weight: bold;
    color: #ffffff;
    background-color: #000;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    top: 198px;
    right: 18px;
  }
}
</style>