pc_shop_site/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>
        <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">
        <h1>{{ cardData.product_name }}</h1>
        <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>
        <!-- <p
          class="card-info-compare"
          @click.stop="addCompareList(cardData.id, $event)"
        >
        Wishlist +
        </p> -->
    </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: {
    addCompareList(id, e) {
      this.$axios
        .post("home/compare_add", {
          id,
          compare_keys: "keys",
        })
        .then((res) => {
          if (res.code === 1) {
            this.$store.dispatch("getCompareList");
            this.$emit("addCompare", e.target);
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch(() => {});
    },
    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;
    .card-img-1{
      transition: all 0.5s ;
    }
    .best_icon {
      position: absolute;
      top: 0;
      left: 0;
    }
    .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>