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